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 : 12pt}
BODY ~ P { line-height: 16pt } /*BODY에 1차로 포함되는 P에 적용*/
...
...
<BODY>
<P>
여기는 줄 간격이 16pt이다.<BR>
여기는 줄 간격이 16pt이다.
</P>
<BLOCKQUOTE>
여기는 줄 간격이 12pt이다.<BR>
여기는 줄 간격이 12pt이다.
<P>
여기도 줄 간격이 12pt이다.<BR>
여기도 줄 간격이 12pt이다.
</P>
</BLOCKQUOTE>
이렇게 나와요
아직은 완벽하게 구현되지 않는 것 같다. 예를 보면 알겠지만 BLOCKQUOTE의 자식인 P(BODY의 손자)에도 BODY ~ P에 정의한 스타일이 그대로 적용되고 있다.
◀ ■ ▶