가상요소선택자(Pseudo-Element Selector)

가상요소선택자는 selector 뒤에 콜론(:)을 붙여서 사용한다는 점에서 가상클래스선택자와 사용방법이 유사합니다. 하지만 가상요소선택자의 경우 콜론을 두개(::)붙여준다는 점에서 약간의 차이가 있습니다.

선택자::____{ 속성: 속성값; }

하지만 콜론을 두개 붙이는 권고가 나온 것은 CSS3부터로 이전에는 콜론을 하나 붙여서 사용을 했기 때문에 콜론을 하나 붙여도 작동을 하기는 합니다. 하지만 되도록 작성을 할 때는 CSS3의 명세에 맞춰서 콜론을 두개 붙여 작성하는 것을 권장드립니다.

그렇다면 가상요소선택자와 가상클래스선택자는 개념적으로 어떠한 차이가 있을까요? 가상클래스 선택자는 상태에 따라서 첫번째 자식이나 방문했던링크와 같이 실제로 존재하지 않은 상태에 이름을 붙여줬지만, 가상요소선택자는 상태에 따라 스타일을 변경하는 것이 아니라 실제로 존재하지 않는 요소를 만들거나 범위를 만들어 거기에 스타일을 적용합니다.

1. ::before & ::after

1-3 ::before

selcetor로 선택된 요소의 콘텐츠 앞에 일부 콘텐츠를 삽입할 수 있습니다. 컨텐츠 내용이 없더라도 반드시 가상 요소에 content를 명시해주어야합니다. 아래와 같이 가상요소를 사용해서 디자인적으로 꾸며주는 용도로만 사용하고자 할 때 이용할 수 있습니다.

<ul>
  <li>개인정보처리방침</li>
  <li>운영관리 방침</li>
  <li>위치정보 이용약관</li>
</ul>

ul {
  display: flex;
  list-style: none;
}

li::before {
  content:"|";
  margin: 0.8px;
  color: gray;
}

li:first-child::before {
  display: none;
}

2. ::first-letter & ::first-line & selection

2-1 ::first-letter

텍스트의 첫 글자에 특별한 스타일을 추가하는 데 사용이 됩니다. 단 주의를 해야하는 부분은 만약, ::before과 함께 쓰이는 경우 첫 글자가 ::before로 인식되어 ::before에 스타일이 적용됩니다.

2-2 ::first-line

텍스트의 첫 번째 줄에 특별한 스타일을 추가하는데 사용됩니다. 여기서 첫번째 줄이란 브라우저의 가로폭에 의해서 개행이 된 기준으로의 첫 번째 줄을 의미합니다.

2-3 ::selection

선택된 영역에 대한 스타일을 지정합니다. 마우스를 이용해 텍스트의 일정 영역을 드래그하면 해당 영역에 대해 스타일이나타납니다.