* 조상/자손 요소 사이의 포함 관계는 설명만으론 복잡하고 혼동의 여지도 있어서 이 예제를 통해 설명한다.
이 문단 요소는 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 색상으로 표시된다. '자손' 요소가 아니라 '자식' 요소이므로, 요소 간 직속 포함 관계가 성립해야 한다.