선택자
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;}
최신 댓글