[HTML/CSS][Ch7] CSS 선택자_가상 클래스

hover

 

active

 

focus

focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당한다.

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

 

<div class="box" tabindex="-1"></div>

HTML 대화형 콘텐츠 요소가 아니더라도, tabindex 속성을 사용한 요소도 focus가 될 수 있다.

이름에서도 알 수 있듯, Tab 키를 사용해 focus할 수 있는 순서를 지정하는 속성이다.

순서값을 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다.

 

first-child

fuits 클래스를 가지고 있는 요소의 하위 요소인 span 태그를 찾고

찾아진 span 태그 요소 중 첫째 요소를 선택.

 

last-child

fuits 클래스를 가지고 있는 요소의 하위 요소인 h3 태그를 찾고

찾아진 h3 태그 요소 중 막내라면 선택.

 

nth-child(n)

fuits 클래스를 가지고 있는 요소의 하위 모든 요소를 찾고

찾아진 요소 중 두번째 요소라면 선택.

 

fuits 클래스를 가지고 있는 요소의 하위 모든 요소를 찾고

찾아진 요소 중 2의 배수(짝수)라면 선택

 

fuits 클래스를 가지고 있는 요소의 하위 모든 요소를 찾고

찾아진 요소 중 2의 배수+1(홀수)라면 선택

 

fuits 클래스를 가지고 있는 요소의 하위 모든 요소를 찾고

찾아진 요소 중 두번째 요소부터 선택.

 

not

fuits 클래스를 가지고 있는 요소의 하위 모든 요소를 찾고

찾아진 요소 중 span 태그가 아닌 요소를 선택.