자손, 자식, 인접 형제 요소 선택하기

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

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

이 문단 요소는 div.n의 자손 요소이자 div.c의 자손 요소이므로, 스타일 규칙 #n *.c :first-line { color:violet; font-weight:bold; }에 의해 첫 줄에 violet 색상이 적용된다. 다만, div.n의 바로 아래인 자식 요소가 아니므로 자식 요소 선택자에 지정한 스타일이 적용되지 않는다. 브라우저의 너비가 변하면 자동 줄바꿈 발생으로 첫 줄 영역이 늘어나거나 줄어든다.

이 문단은 div.n의 자손이지만 class=”b”로 지정돼 있어서 적용할 스타일이 없다.

이 문단은 div.n의 자손이자 div.c 의 자식 요소다. 따라서 이 문단의 첫 줄은 CSS로 지정한 blue 색상으로 표시된다. '자손' 요소가 아니라 '자식' 요소이므로, 요소 간 직속 포함 관계가 성립해야 한다.

이 요소는 바로 위의 div.n에 인접한 형제 요소다. CSS로 지정한 #n + *.c + :first-line { color:red; font-weight:bold; } 규칙은 이 요소에는 적용되지 않으며 이 요소에 붙어있는 아래의 인접 형제 요소에 적용된다. 만일 이 요소의 내용 전체 색상을 빨간색으로 지정하고 싶다면 스타일 규칙의 선택자를 #n + *.c 로 작성하면 된다.
이 요소는 div.n에 인접한 형제 요소에 다시 인접한 형제 요소다. 그래서 #n + *.c + :first-line 선택자에 지정된 규칙에 의해 첫째 줄에 빨간색 볼드체 스타일이 적용된다.