가상요소 선택자

가상요소(Pseudo-Element)

별도의 클래스를 지정하지 않아도 지정 할 수 있는 엘리먼트이다.

존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분을 선택 할 수 있습니다.

주로 사용하는 가상요소는 아래와 같습니다.

 

::first-line

요소의 텍스트에서 첫 줄에 스타일을 적용합니다.

ex ) p::first-line { color: red; }

p태그의 첫번째 줄에 있는 텍스트 색을 red로 칠합니다.

 

::first-letter

요소의 첫번째 문자에 스타일을 적용합니다.

ex ) p::first-letter { color: red; }

p태그의 첫번째 문자를 빨간색으로 바꿉니다.

 

::before

요소의 컨텐츠 앞을 선택합니다. content속성이 '꼭' 같이 쓰입니다.

ex ) p::before { content:"ABCDEFG"; color: red;}

p태그의 content 앞에 red텍스트 ABCDEFG를 추가합니다.

 

::after

요소의 컨텐츠 뒤를 선택합니다. content속성이 '꼭' 같이 쓰입니다.

ex ) p::after { content:"ABCDEFG"; color: red;}

p태그의 content 뒤에 red텍스트 ABCDEFG를 추가합니다.

 

::selection

요소의 텍스트에서 드래그된 영역의 속성을 변경합니다.

보통은 드래그 영역의 배경색과 문자 색상을 바꾸기 위해서 사용합니다.

::selection에 사용 가능한 속성들은 아래와 같이로 제한되어 있습니다.

• color 속성
• background-color 속성
• cursor 속성
• outline 속성

::placeholder

placeholder속성은 input요소나 textarea요소에 안내문을 적을 수 있습니다.

그리고 placeholder 속성에 들어가는 안내문을 꾸미는 대에는 ::placeholder 선택자가 필요합니다.