CSS 셀렉터 레벨 3

선택자

E + F

이웃 형제 요소 결합 선택자.
E와 바로 닿아 있고, 같은 레벨의 형제요소 F에만 스타일이 적용됨

h2 + p { color: blue; } 
/* h2 바로 다음에 오는 p의 글자를 파란색으로 표시 */
<h2>타이틀</h2>
<p>파란색으로 나옴</p>
<p>파란색 아님</p>

E ~ F

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

h2 ~ p { color: red; }

/* h2 이후의 같은 레벨 p를 모두 빨간색 글자로 표시 */
<h2>타이틀</h2>
<p>빨간색</p>
<div>
    <p>빨간색 아님</p>
</div>
<p>빨간색</p><br>

E > F

E의 자식인 F를 선택함.

h2 > p { }

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

가상 클래스/요소

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

::before / ::after

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

E::before {}
E::after {}

::section

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

E::selection { }

::first / ::last

E::first-line { }
E::first-letter { }

E:first-child { }
E:last-child { }
E:only-child { }

E:first-of-type { }
E:last-of-type { }

E:not(F)

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

div > :not(p) { color:red; }
/* div 하위에 있는 것 중 p가 아니라면 모두 빨간색으로 표시 */
 
p:not(:first-child) {font-style:italic;}
/* div 하위에 있는 p중 첫번째 p만 제외하고 이탤릭으로 표시 */

:only

E:only-of-type {}

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

E:only-child {}

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

:disabled / :enabled / :checked

input[type="text"]:disabled {}
input[type="text"]:enabled {}
input[type="text"]:checked {}

:target

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

#my_id:target { background: yellow ; }
 
<a href="http://test.com#my_id">link</a>
<h4 id="my_id">text</h4>

:empty

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

td:empty {background:red;}