table 태그의 요소를 선택할 때는 자손 선택자를 사용하는 것이 좋지 않다.
| <!DOCTYPE html> <html> <head> <title>CSS3</title> <style> /* table 태그 아래의 tr 태그 아래 th 태그의 color 속성에 red 키워드를 적용합니다.*/ table > tr > th { color:red; } </style> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Region</th> </tr> <tr> <td>OTEP</td> <td>서울</td> </tr> </table> </body> </html> |
코드를 실행하면 아래와 같이 실행된다. 대부분 th 태그에 빨간색이 적용되는 것으로 예상했을 테지만, 실제로는 스타일 속성이 적용되지 않는다.
이 문제는 요소 검사를 사용해 HTML 페이지의 계층 구조를 살펴보면 원인을 알 수 있다.
table 태그에 tbody 태그가 자동으로 추가되어 table>tbody>tr>th 선택자를 사용해야 색상을 적용할 수 있다.
소스코드와 실행결과가 달라 혼동되므로 table 선택자에 스타일을 적용할 때는 자손 선택자를 사용하지 않는게 좋다.
'Programming > HTML/CSS' 카테고리의 다른 글
| [CSS] 시작 문자 선택자 (0) | 2012.11.30 |
|---|---|
| [CSS] overflow, position, flow (0) | 2012.11.30 |
| 시맨틱 태그 (0) | 2012.11.30 |
| block 형식의 태그와 inline 형식의 태그 (0) | 2012.11.29 |
| select 태그 (0) | 2012.11.29 |
