[CSS] CSS의 가상 요소 선택자(Pseudo-element Selectors)

CSS는 선택자(ex. h1, .class 등)를 잡아 HTML 요소에 스타일을 준다.

CSS가 선택자를 잡는 기준은 5가지로 나눌 수 있다.

 

1. Simple Selectors(요소의 name,id,class를 기준으로 선택 - 일반적인 방법)
2. Combinator Selectors(요소 간의 관계를 기준으로 선택)
3. Pseudo-class Selectors(요소의 특정 상태를 기준으로 선택)
4. Pseudo-elements Selectors(요소의 특정 부분을 선택)
5. Attribute Selectors(요소가 가진 속성이나 속성의 값으로 선택)

이번 글에서는 Pseudo-elements Selectors에 대해서 알아보겠습니다.

Pseudo-elements Selectors(요소의 특정 부분을 선택)

가상 요소 선택자는 첫번째 줄, 첫번째 글자처럼 요소의 특정 부분을 선택하는 역할을 한다.

 

표기법 - 기준 요소 뒤에 콜론(' : ') 두개를 붙여서 사용 ex. h1::first-line{}

아래에서 가상 요소 선택자를 예를 통해 알아보겠습니다.

 

1) first-line (첫번째줄 선택)

/* h1 태그의 첫번째 줄의 글자색을 빨간색으로 변경 */
h1::first-line {
    color:red;
}

 

2) first-letter (첫번째 글자 선택)

/* h1 태그의 첫번째 글자의 글자색을 빨간색으로 변경 */
h1::first-letter {
    color:red;
}

+

 

first-line과 first-letter을 동시에 사용할 수 있다.

 

3) before (요소 앞을 선택 - 요소 앞에 특정 내용을 넣을때 사용)

/* h1 태그 앞에 'abc'라는 글자를 삽입 */
h1::before {
    content:'abc';
}

/* h1 태그 앞에 특정 사진을 삽입 */
h1::before {
    content:url(주소값);
}

4) after (요소 뒤를 선택 - 요소 뒤에 특정 내용을 넣을때 사용)

/* h1 태그 뒤에 'abc'라는 글자를 삽입 */
h1::after {
    content:'abc';
}

/* h1 태그 뒤에 특정 사진을 삽입 */
h1::after {
    content:url(주소값);
}

5) selection ( 사용자가 선택한 부분 - ex. 사용자가 드래그나 더블클릭을 하여 블록 처리된 텍스트)

/* 선택된 요소의 글자색을 빨간색으로 변경 */
::selection {
    color:red;
}

 

+

::selection 선택자는 color, background, cursor, outline 속성만 변경할 수 있다.

 

참고 - "Learn CSS" W3School (https://www.w3schools.com)