CSS 선택자(Selector) - (3) 가상 클래스 선택자

가상 클래스 선택자

가상 클래스(Pseudo-class)는 요소의 특별한 상태를 가리키는 키워드입니다.

가상 클래스를 선택자와 함께 사용하면, 요소가 특별한 상태일 때 CSS가 적용되게 할 수 있습니다.

 

• 1. 일반 구조 선택자
• 2. 형태 구조 선택자
• 3. 부정 선택자
• 4. 반응 선택자
• 5. 상태 선택자

1. 일반 구조 선택자

•  선택자:first-child  해당 요소의 형제 요소 중 첫 번째 요소가 지정한 '선택자'와 같은 경우 선택합니다.
•  선택자:last-child  해당 요소의 형제 요소 중 마지막 요소가 지정한 '선택자'와 같으면 선택합니다.
•  선택자:nth-of-child(n)   해당 요소의 형제 요소 중 n번째 요소가 지정한 '선택자'와 같으면 선택합니다.
•  선택자:nth-of-last-child(n)   nth-of-child와 같으나, 요소를 앞에서부터 세지 않고 뒤에서부터 셉니다.

일반 구조 선택자는 요소의 자식 요소가 특정한 순번일 때 선택하는 선택자입니다.

 

주의할 부분은 지정한 순번의 형제 요소가 지정한 선택자가 아닌 경우 선택되지 않는다는 부분입니다.

  <div style="background-color: red; width: 50px;">빨강색</div>
  <div style="background-color: yellow; width: 50px;">노랑색</div>
  <div style="background-color: green; width: 50px;">초록색</div>
  <span style="background-color: skyblue">하늘색</span>

위와 같이 작성된 html 문서에서 일반 구조 선택자를 활용해 첫 번째 <div> 태그를 선택해 글자색을 바꾸고 싶다면

다음과 같이 작성할 수 있습니다.

div:first-child{ color: white; }

또는  :nth-of-child(n)  선택자를 사용할 수도 있습니다.

div:nth-of-child(1){ color: white; }

세 번째 <div> 태그를 선택하고 싶다면 어떻게 해야 할까요?

div:last-child{ color: white; }

만약 위와 같이 작성할 경우,  생각한 것과 달리 <div> 태그가 선택되지 않습니다.

<div>의 형제 요소 중 마지막 요소는 <div>가 아니라 <span>이기 때문에 선택되지 않습니다.

 

따라서 만약 세 번째 <div>를 선택하려면 다음과 같이 작성할 수 있습니다.

div:nth-child(3){ color: red; }

 

2. 형태 구조 선택자

•  :first-of-type   해당 요소의 특정한 태그를 가진 형제 요소 중 첫 번째 요소를 선택합니다.
•  :last-of-type   해당 요소의 특정한 태그를 가진 형제 요소 중 마지막 요소를 선택합니다.
•  :nth-of-type(n)   해당 요소의 특정한 태그를 가진 형제 요소 중 n번째 요소를 선택합니다.
•  :nth-last-of-type(n)   nth-of-type처럼 n번째 요소를 선택하는데, 요소를 앞에서부터 세지 않고 뒤에서부터 셉니다.

일반 구조 선택자가 모든 형제 요소 간의 순서를 본다면

형태 구조 선택자는 형제 요소 중 지정한 특정 태그를 가진 요소 간의 순서를 봅니다.

div:last-child{ color: white; }

앞서 일반 구조 선택자에서 시도했던 코드입니다.

 

이 경우, <div>태그가 마지막 형제 요소가 아니라서 선택되지 않았습니다.

div:last-of-type{ color: white; }

그러나 위와 같이 작성할 경우,  먼저 형제 요소 중에서 div태그를 가진 요소를 찾고, 그 중 마지막 요소를 선택하게 됩니다.

 

따라서 3번째 <div>태그를 선택할 수 있게 됩니다.

 

div:nth-child(2n){ color: white; }

한편, 일반 구조 선택자 및 형태 구조 선택자 중 n번째 요소를 선택하는 선택자를 사용할 때,

숫자를 넣는 자리에 수열을 넣을 수도 있습니다.

 

이 경우 수열에 해당하는 순번의 요소를 모두 선택할 수 있습니다.

 

3. 부정 선택자

•  :not(선택자) 

부정 선택자는 지정한 선택자로 선택된 요소를 제외한 나머지 요소를 선택하는 선택자입니다.

  <div style="background-color: red; width: 50px;">빨강색</div>
  <div style="background-color: yellow; width: 50px;">노랑색</div>
  <div class="green" style="background-color: green; width: 50px;">초록색</div>
  <span style="background-color: skyblue">하늘색</span>

앞서 사용했던 예시에서 3번째 div태그에  class="green" 속성을 추가했습니다.

 

그리고 부정 선택자를 이용해 다음과 같이 작성하면, class="green"이 없는 <div>태그만 선택됩니다.

div:not(#green){color:white;}

 

4. 반응 선택자

•  :active  해당 요소를 마우스로 선택했을 때 선택합니다.
•  :hover  해당 요소에 마우스를 올렸을 때 선택합니다.

반응 선택자는 사용자의 특정한 행동에 반응하는 선택자입니다.

 

첫 번째 상자에는  :active  선택자를,

두 번째 상자에는  :hover  선택자를 사용해 색이 바뀌도록 작성하였습니다.

 

5. 상태 선택자

•  :focus  해당 input태그 요소를 선택했을 때 css 효과를 적용합니다.
•  :enabled  해당 input 태그 요소가 활성화되어있을 떄 css 효과를 적용합니다.
•  :disabled  해당 input 태그 요소가 활성화되어있을 떄 css 효과를 적용합니다.

 

상태 선택자는 input 및 input과 관련된 태그와 함께 사용할 수 있는 선택자입니다.

 

아래는 상태 선택자를 사용해본 예시입니다.