Pseudo Selector 활용하기

HTML의 요소를 디자인 하기 위해 HTML 태그, 클래스, id 같은 선택자로 해당 요소를 선택하여 스타일을 선언해 주는 것이 CSS의 기본 문법이다. 선택자 { 속성1: 값1; 속성2: 값2; ... }
반면, document tree에 존재하지 않는, 단순 선택자로 표현할 수 없는 것을 선택하여 스타일링 해주는 것을 Pseudo Selector(가상 선택자)라고 하며, 가상 선택자에는 가상 클래스(Pseudo Class)와 가상 요소(Pseudo Element)가 존재한다.

가상 클래스(Pseudo Class)

가상 클래스는 요소 위에 마우스 포인터가 있거나, 해당 유형의 첫 번째 요소이거나 하는 특정 상태에 있는 요소를 선택하는 선택기로 코드의 일부에 클래스를 적용한 것처럼 유연하게 작동한다. 선택자 뒤에 :가상클래스를 붙이며, 기본적인 형태는 아래와 같다.

selector:pseudo-selector {
  property: value;
}

대표적인 가상 클래스의 예시는 아래와 같다.

가상 요소(Pseudo Element)

가상 요소는 선택자에 의해 선택된 요소의 특정 부분에 스타일을 적용한다. 예를들어, 문단의 첫 번째 글자에 다른 스타일을 적용하거나, 요소의 앞/뒤에 장식용 콘텐츠를 추가할 때 사용한다.
선택자 뒤에 ::가상클래스를 붙이며, 가상 클래스 처럼 콜론을 1개 :만 붙이는 형태는 CSS2에서 사용하던 deprecated된 문법이다. CSS3 부터 가상 요소는 콜론 2개를 붙여 가상 클래스와 구별할 수 있게 되었다.
기본적인 형태는 아래와 같다.

selector::pseudo-selector {
  property: value;
}

이 밖에도 다양한 가상 클래스(Pseudo Class)와 가상 요소(Pseudo Element)가 있으며, 이러한 선택자를 잘 활용하면 인터랙티브한 웹을 구성할 수 있다.