[CSS] CSS 선택자 정리 - 가상 클래스

가상 클래스는 클래스 or 태그명 선택자 뒤에 콜론(:)을 붙여서 표시하는 특별한 요소의 상태,

요소의 순서를 기준으로 자식 요소를 선택하는 방법이다.

 

1 상태 가상 클래스 선택자

---

:link, :visited, :hover, :active 는 링크 요소(마우스 클릭에 반응하는 요소)의 다양한 상태를 표현하는데 사용할 수 있는 가상 클래스이다.

 

:link

방문하지 않은 링크를 선택

a:link{
    color:red;
}

:visited

사용자가 방문한 링크를 선택

a:visited{
   color:green;
}

:hover

마우스를 위에 올린 상태

a:hover{
   color:orange;
}

:active

마우스로 클릭한 상태

a:active{
   color:coral;
}

 

※ 주의할 점!
링크 클래스들은 스타일 순서가 매우 중요함.
:link → :visited → :hover → :active

 

2 유효성 검사 상태 가상 클래스 선택자

---

:focus

클릭하거나 탭했을 때, 포커스를 받을 수 있는 요소(입력 필드 등)를 탭 키를 사용해 이동해 선택한 경우,

요소에 포커스가 가면서 선택자 속성이 적용된다.

input:focus{
   background-color:#555;
}

:target

a 링크와 특정요소의 값이 id로 연결되어있을 때,

a 링크를 클릭했을 때 특정요소에 :target 선택자를 지정해주면

a 링크 클릭시 스타이을 지정해줄 수 있다.

:target{
	color:red;
 }

:enable

:disabled

:cheched

:required

:optional

 

3 구조적 가상 클래스 선택자

---

:root

:first-child

:last-child

:nth-child()

특정 순서에 있는 요소를 선택할 수 있다.

• (3n+1) → 1, 4, 7, 10번째 요소 선택
• odd → 홀수번째 요소
• even → 짝수번째 요소

:nth-of-type()

:first-of-type

:last-of-type

:nth-last-of-type()

:nth-last-child()

형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용한다.

nth-child와 다른 점은 뒤에서부터 센다.

:only-of-type