Parent-child selectors


Parent-child selector는 하나의 element가 다른 element에 포함되었을 때 스타일을 정의하도록 해준다. Contextual selector와 비슷한데, contextual selector가 2대나 3대 자손이 되어도 되는 반면, parent-child selector는 이름에 나타나듯이 포함되는 첫번째 element에만 해당된다.

Parent-child selector를 나타낼 때는 ~ 표시를 해 준다.

BODY{font-size:10pt;line-height:11pt}
BODY ~ P{line-height:16pt} /*BODY에 1차로 포함되는 P에 적용*/
...
...
<BODY>
<P>
여기는 줄 간격이 16pt이다.<BR>
여기는 줄 간격이 16pt이다.
</P>
<BLOCKQUOTE>
여기는 줄 간격이 11pt이다.<BR>
여기는 줄 간격이 11pt이다.
<P>
여기도 줄 간격이 11pt이다.<BR>
여기도 줄 간격이 11pt이다.
</P>
</BLOCKQUOTE>

아직은 완벽하게 구현되지 않는 것 같다. 예를 보면 알겠지만 BLOCKQUOTE의 자식인 P(BODY의 손자)에도 BODY ~ P에 정의한 스타일이 그대로 적용되고 있다.