CSS 선택자 - 가상 클래스

CSS 선택자는 크게 5 종류로 구분할 수 있습니다.

 각각 기본, 복합, 가상 클래스, 가상 요소 및 속성입니다.

 

이번 글에서는 가상 클래스 선택자(Pseudo-Classes)를 다루겠습니다.

1. ABC:hover

선택자 ABC 요소에 마우스 커서가 올라가 있는 동안를 선택하겠다는 의미를 가집니다.

 

2. ABC:active

선택자 ABC 요소에 마우스 클릭하고 있는 동안를 선택하겠다는 의미를 가집니다.

 

3. ABC:focus

선택자 ABC 요소가 포커스되면 선택하겠다는 의미를 가집니다.

Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당합니다.

input, a, button, label, select 등 여러 요소가 있습니다.

그리고 HTML 대화형 콘텐츠 요소가 아니더라도,

tabindex="-1" 속성을 사용한 요소도 Focus가 될 수 있습니다.

구글에서 HTML 대화형 콘텐츠 mdn 검색하면 더 많은 정보를 얻을 수 있습니다.

 

한 페이지에 여러 요소가 Focus부여하더라도

Focus는 하나에만 집중되는 거라 다른 요소로 이동 되면, 전 요소 focus는 자동 해제됩니다.

 

5. ABC:first-child

선택자 ABC가 형제 요소 중 첫째라면 선택되는 가상 클래스 선택자입니다.

예시처럼, fruits 클래스의 하위 요소 span태그 중 첫째에게 red색을 입혀주는 겁니다.

요기서 주의할 점은, 만약에 fruits 클래스의 하위 요소중 span태그 대신 다른 태그들 찾으려고 하면,

작동이 안 됩니다.

왜냐하면 span태그가 첫째라서 스타일이 입혀진 겁니다.

 

6. ABC:last-child

선택자 ABC가 형제 요소 중 막내라면 선택되는 가상 클래스 선택자입니다.

예시처럼, fruits 클래스의 하위 요소 h3태그 중 마지막에게 red색을 입혀주는 겁니다.

first-child와 같은 점은, 마지막 요소가 h3태그가 아니면 해당 스타일이 입혀지지 않습니다.

 

7. ABC:nth-child(n)

nth-child(n)

선택자 ABC가 형제 요소 중 n째라면 선택되는 가상 클래스 선택자입니다.

예시처럼, fruits 클래스의 하위 요소들 중 2번째에게 red색을 입혀주는 겁니다.

 

nth-child(2n)

위에 nth-child의 변형버전으로 생각하시면 됩니다.

예시처럼, 괄호 안에 2n이 들어갔었습니다.

즉, 2의 배수인 요소들 모두 스타일을 입힌다는 뜻이죠.

숫자가 3으로 바뀌면, 3의 배수의 요소들을 스타일을 입힙니다.

주의할 점은, 여기서 n는 0부터 시작됩니다(Zero-Based Numbering).

 

nth-child(2n+1)

또 다른 nth-child의 변형버전입니다.

예시처럼, 괄호 안에 2n+1이 들어갔습니다.

즉, 홀수 요소들에게 모두 스타일을 입힌다는 뜻입니다.

 

nth-child(n+2)

또 다른 nth-child의 변형버전입니다.

예시처럼, 괄호 안에 n+2이 들어갔습니다.

앞에도 언급했듯이, n는 0부터 시작합니다.

즉, 2번째 요소부터 스타일을 입혀준다는 뜻입니다.

 

8. ABC:not(XYZ)

선택자 XYZ가 아닌 ABC 요소가 선택되는 가상 클래스 선택자입니다.