Programming/HTML CSS
먼저 구조선택은 구조상 같은 위치의 태그를 선택하기 위해 다음 4가지 keyword를 사용할 수 있습니다.

 first-child  첫번째 태그
 last-child  마지막 태그
 nth-child  n번째 태그
 nth-last-child  마지막에서 n번째 태그

예를 들면
<table>
 <tr>
  <td>이름</td>
  <td>주소</td>
  <td>나이</td>
  <td>전화</td>
 </tr>
</table>
위 구조에서 첫번째 td와 세번째 td를 구조태그로 선택하려면 다음과 같이 선택자를 작성할 수 있습니다.
td:first-child, td:nth-child(3) {
 color:red;
}
특히 nth- 선택자를 사용하면 뒤에 가변적인 수열을 작성해서 원하는 태그를 반복적으로 선택할 수 있습니다.
td:nth-child(2n+1) {
 color:red;
}
위 구현은 첫번째 선택자 구현과 결과가 일치합니다. 뒤에 지정한 숫자는 2n + 1이므로 1부터 시작해 2씩 더해져 첫번째와 세번째 td를 선택하게 합니다. 이 상태에서 만약 td태그가 1개 더 추가된다면 자연히 추가된 td도 선택자 영향을 받게 됩니다.

구조 선택은 조금 다른 방식으로 다음 선택자도 사용할 수 있습니다.

 first-of-type  자손중 첫번째
 last-of-type  자손중 마지막
 nth-of-type  자손중 n번째
 nth-last-of-type  자손중 마지막 n번째

이 선택자를 사용해 이미 언급한 태그에서 첫번째 td만을 선택하게 하려면 아래와 같이 선택자를 작성합니다.
tr > td:first-of-type {
 color:red;
}
▶ tr 자손중 첫번째 td를 선택

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

[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
0 0