목차
접기
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블에서 하위선택자 사용 방법</title>
<style>
/* table에서는 하위선택자를 사용하고자 할 때 > 를 사용하면 적용이 안된다.
아래와 같이 적용을 해야 스타일이 적용된다. */
/* table > tr > th {
background-color: blue;
color: white;
} */
table tr th {
background-color: blue;
color: white;
}
table tr td {
background-color: black;
color: yellow;
}
/* 테이블 태그에는 thead, tbody 자동으로 추가를 해주기 때문에 스타일이 적용이 되지 않는다. */
</style>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>지역</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>광주광역시</td>
<td>38</td>
</tr>
</table>
</body>
</html>🛩 table은 자동으로 thead, tbody를 추가해주기 때문에 하위 선택자를 설정할 때, > 을 사용하면 적용되지 않음을 주의
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| 상태 선택자 (0) | 2021.06.03 |
|---|---|
| 반응 선택자(link, visited, active, hover...) (0) | 2021.06.03 |
| 가장 인접한 형제 찾아서 CSS 적용시키기 (0) | 2021.06.02 |
| *= 속성 선택자 사용법 (0) | 2021.06.02 |
| '$= 선택자 사용방법'과 파일 다운로드 받을 수 있게 하는 방법 (0) | 2021.06.02 |