CSS / 선택자(Selector) / 가상 요소
가상 요소
- 가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다.
- 가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동합니다.
::first-line
::first-line은 요소의 첫번째 줄을 선택합니다. 예를 들어
|
1 2 3 |
p::first-line { color: red; } |
는 p 요소의 첫번째 줄의 글자색을 빨간색으로 만듭니다.
::first-letter
::first-letter는 요소의 첫번째 문자를 선택합니다. 예를 들어
|
1 2 3 |
p::first-letter { color: red; } |
는 p 요소의 첫번째 문자의 색을 빨간색으로 만듭니다.
::before
::before는 요소의 앞을 선택합니다. 예를 들어
|
1 2 3 4 |
p::before { content: "xyz"; color: red; } |
는 p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.
::after
::after는 요소의 뒤를 선택합니다. 예를 들어
|
1 2 3 4 |
p::after { content: "xyz"; color: red; } |
는 p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.
::selection
::selection은 마우스 드래그 등으로 선택한 텍스트를 선택합니다. 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기를 참고하세요.