Programming/HTML CSS
후손 선택자

후손이라 함은 특정 태그 아래에 속한 태그를 의미하며 태그를 단계별로 지정하여 원하는 요소를 선택하는 방법입니다.
<table>
 <tr>
  <td>이름</td>
  <td name="name"><input type="text" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td name="phone"><input type="text" /></td>
 </tr>
</table>
위와 같은 구조의 태그가 있는 경우 input 요소를 선택하려면 다음과 같이 할 수 있습니다.
td input {
 border-color:red;
}
td 아래에 input 이 있는 형태이므로 input은 td의 후손이라 할 수 있습니다.(사실 위 방법은 별 의미가 없습니다. 그냥 input 이라고만 해줘도 선택되는 것은 마찬가지인데 후손의 개념을 설명하기 위한 것이므로 이해 바랍니다.)

필요한 경우 다음과 같이 길게 늘어놓을 수도 있죠.
table tr td input {
 border-color:red;
}
▶table 밑에 있는 tr 밑에 있는 td 밑에 있는 input을 선택

이러한 방법말고 대신 전화번호에 해당하는 input 요소만을 선택하고자 한다면
td[name=phone] input {
 border-color:red;
}
위와 같이 할 수도 있습니다. 태그요소 대신 특정속성이나 아이디와 같은 다른 방법으로도 후손의 개념을 적용하는 것입니다.

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

[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
0 0