[CSS] 가상 선택자(Pseudo selector) 개념, 예시

From Pixabay b3nj5m1n's Image

가상 선택자(Pseudo selector)란?

보통 선택자는 HTML 태그, Class, Id 등 HTML 요소(element)를 직접적으로 선택하여 CSS를 통해 꾸며줍니다. (선택자 개념: [CSS] 선택자(Selectors)와 조합(Combinators)) 하지만, 가상 선택자는 HTML요소를 직접적으로 선택하지 않고, 요소의 상태에 따라 선택하여 꾸며주는 것을 의미합니다. 가상 선택자는 가상 클래스(Pseudo class) 라고도 합니다.

기본적인 형태는 다음과 같습니다.

selector:pseudo-selector {
  property: value;
}

 

예시) HTML div 요소 중, 첫 번째(상태)와 마지막(상태)에 있는 div요소를 초록색으로 바꾸기

See the Pen pseudo-selector by netsus (@netsus) on CodePen.

 

 

 

div 선택자 뒤에 :가상선택자(:first-child)를 붙여 HTML 태그를 직접적으로 선택하는 것이 아니라, div 중에 첫 번째 자식 요소에 대해 스타일을 설정할 수 있습니다. 마찬가지로 마지막 자식(last-child)도 선택하여 꾸몄습니다.

 

외에도 다양한 가상 선택자들이 존재합니다.

가상 선택자(가상 클래스)	설명
:hover	선택자위에 마우스 커서가 있을 때
:active	선택자가 클릭된 상태일 때
:focus	선택자가 마우스나 키보드에 의해 선택되었을 때
:visited	선택자(링크인 경우)가 이미 방문한 사이트일 때

위의 가상 선택자들은 특별히 States라고 불립니다. 자세한 설명은 아래 링크에 설명되어 있습니다.

[CSS] States (active, focus, hover, visited, focus-within)

 

가상 선택자 기초 사용법

예시) nth-child: n 번째 자식을 선택하는 가상 선택자

See the Pen pseudo_selector_nth_child by netsus (@netsus) on CodePen.

 

 

위에서 odd 부분을 even으로 바꾸면 짝수 번째를 선택하고, 3n+1로 설정하면 1번, 4번, 7번... 이런 식으로 n에 0,1,2,3... 을 대입했을 때의 값에 대해 선택합니다. 식은 자유롭게 쓸 수 있습니다.

 

마치며

가상 선택자(가상 클래스)는 HTML의 요소를 직접적으로 선택하기보단 전체 구성에 대해 선택하기 때문에 코드를 간소화 하고, 직관적으로 쉽게 CSS로 꾸밀 수 있습니다. 정말 많은 종류의 가상 선택자가 있으므로, 필요한 기능에 대해 검색하여 가상 선택자를 사용한다면 매우 효율적으로 CSS를 작성할 수 있을 것입니다. 감사합니다.

 

Reference
노마드 코더 카카오 클론 #3. 14