Programming/HTML CSS
자손 선택자 

자손은 문서 구조상 특정 태그의 아래 모든 요소를 자손이라고 합니다.
<table>
 <tr>
  <td>이름</td>
  <td>입력 : <input type="text" id="name" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td>입력 : <input type="text" id="phone" /></td>
 </tr>
</table>
위 태그에서 tr의 자손은 td입니다.
tr > td {
 color:red;
}
▶ tr 아래 모든 td에 스타일을 적용합니다.

자손을 지정할때 특정 태그로 한정한다면 해당 태그의 자손만 유효합니다. 예를 들어
<table>
 <tr>
  <td>이름</td>
  <td><input type="text" id="name" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td><input type="text" id="phone" /></td>
 </tr>
 <tr id="sub">
  <td>기타</td>
  <td>
   <table>
    <tr>
     <td>주소</td>
     <td><input type="text" id="address" /></td>
    </tr>
   </table>
  </td>
 </tr>
</table>
위와 같은 구조의 경우 다음과 같이 지정했을때
#sub > td {
 color:red;
}
스타일이 적용되는 것은 id가 sub인 tr에서의 아래 요소뿐이므로 화면상으로는 '기타'표시만 바뀌게 됩니다. 하위 table 아래에 td는 상위 sub 아이디의 tr 아래에 포함되지 않습니다.

위 예제로 table 태그를 사용하였는데 대부분의 웹브라우저에서는 table 태그사용시 자동으로 tbody를 추가하는 경우가 있습니다. 이 때문에 자손 선택자 사용시 원하지 않는 결과가 생길 수 있으므로 주의가 필요합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
0 0