[CSS] 가상 클래스(Pseudo-class)와 가상 요소(Pseudo-element)

CSS의 선택자 중에서 가상 클래스와 가상 요소가 무엇이고 그 차이점에 대해 정리해보고자 한다.

(더 자세한 내용은

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)

 

 

 

 

 

1. 가상 클래스(Pseudo-class)

가상 클래스란, 어떤 특정 상태에 있는 엘리멘트를 선택하는 선택자(selector)를 의미한다.

 

예)

타입 선택자의 첫번째 엘리멘트

마우스를 위에 올릴 때 색상이나 이미지 변경 등

 

가상 클래스는 콜론:을 붙임으로써 사용할 수 있다.

 

가상 클래스 중 많이 쓰이는 종류를 몇 가지 들어보자면,

 

:hover

`마우스 포인터가 위에 있는 경우

 

:focus

사용자가 엘리멘트를 클릭하거나 키보드 컨트롤을 하는 경우

 

:nth-child

특정 엘리멘트의 몇번째 자식 요소인지를 선택

 

:active

해당 요소를 클릭한 상태일 때

 

:link

방문하지 않은 사이트인 경우

 

:visited

방문한 사이트인 경우

 

:not(seletor이름)

선택자를 제외한 나머지 요소들

 

등이 있다.

2. 가상 요소(Pseudo-element)

가상 요소도 가상 클래스처럼 비슷한 방식으로 작동하지만,

다만 다른 점은

가상 클래스는 기존하는 html 클래스에 적용하는 방식인 반면,

가상 요소는 아예 새로운 html 요소를 더하는 것처럼 작동한다는 것이다.

 

가상 클래스는 콜론을 두 개::를 붙임으로써 사용할 수 있다.

 

가상 요소의 종류로는

 

::fisrt-line

지정된 요소의 첫 번째 줄에

 

::first-letter

지정된 요소의 첫 번째 글자에

 

::before

지정된 요소 앞에

 

::after

지정된 요소 뒤에

 

등이 있다.

 

 

만약 아티클 내 첫번째 문단의 첫번째 줄의 글자들을 볼드하게 만들고 싶다면,

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

이런 식으로 가상 선택자와 클래스를 혼용해서 쓸 수 있다.