하위, 자식, 최인접 대등 요소 선택하기

* 상하위 포함 관계는 설명만으론 복잡하고 혼동의 여지도 있어서 이 예제를 통해 설명한다.

이 문단 요소는 id=”n”인 요소의 하위 요소이자 class=”c”인 요소지만, p 요소 자체가 말단 요소라서 하위 요소가 있을 수 없다. 따라서 CSS 선택자의 :first-line 부분에 해당될 하위 또는 자식 요소가 없으므로 적용할 스타일이 없다. div 요소와 p 요소를 쉽게 구분하고 포함 관계를 한눈에 볼 수 있도록, div에는 점선의 회색 테두리를 적용하고 p에는 실선의 굵은 오렌지색 테두리를 적용했다.

이 문단 요소는 id=”n”인 요소의 하위 요소이자 class=”c”인 요소(div) 하위에 있는 p 요소이므로, 스타일 명령 #n *.c :first-line { color:violet; font-weight:bold; }에 의해 첫 줄에 violet 색상이 적용된다. 다만, id=”n”인 요소에 직속된 관계가 아니므로 자식 요소 선택자에 지정한 스타일이 적용되지 않는다. 브라우저의 너비가 변하면 자동 줄바꿈 발생으로 첫 줄 영역이 늘어나거나 줄어듭니다.