CSS 셀렉터 레벨 3

선택자

E + F

이웃 형제 요소 결합 선택자.
E의 하위가 아닌 형제요소인 F에만 적용됨.

 

 

E ~ F

범용 형제 요소 결합 선택자.
E 이후에 같은 레벨의 F에 모두 스타일을 적용함. (그 하위의 F까지는 적용되지 않음)
따라서 아래의 경우 h2이후의 모든 p에 스타일이 적용됨.

 

 

E > F

E의 자식인 F를 선택함.

h2 p 처럼 그냥 자식요소를 선택하는 것과는 다르게 바로 인접한 자식요소만 선택됨.

가상 클래스/요소

가상 클래스와 가상 요소를 잘 활용하면 특정 조건에서만 적용되도록 스타일을 입힐 수 있다.

::before / ::after

기존에 쓰던 콜론 한개 짜리 :before 등은 더 이상 사용하지 않음.
IE 8를 지원해야 하는 경우에만 사용함.

::section

마우스로 긁어서 선택한 텍스트의 스타일을 지정함.

::first / ::last

E:not(F)

F를 제외한 E의 모든 자식요소를 선택함.

 

:only

여러 요소들 가운데 특정 요소를 선택할 수 있음.
같은 클래스를 지정한 여러 요소들 중 특정요소만 특정지을 수 있을 듯.

문서내에 유일하게 존재하는 요소만 선택할 수 있음.
유일하게 해당하는 자식요소를 선택함.

:disabled / :enabled / :checked

 

:target

문서 내 특정되는 링크에 스타일을 지정함.
아래의 경우 a를 눌렀을 때 h4#my_id 부분을 노란색 바탕으로 보이도록 지정할 수 있음.

 

:empty

자식요소가 없는 요소를 선택함.

 

in CSS Tags: cssselector