자손 선택자
선택자 우선순위
id > 자식/후손 >클래스 > 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_child</title>
<style>
*{
margin: 0;
padding: 0;
}
span{
display: block;
}
/*후손 선택자
.box 안에 있는 모든 h3
선택자 우선순위
id > 자식/후손 >클래스 > 태그
*/
.box h3{
color: #f00;
}
.box span h3{
background-color: #ff0;
}
h3{
background-color: #0f0;
}
/*자식 선택자
.box 바로 밑에 있는 h2
*/
.box > h2 {
color: #00f;
}
#hh22{
background-color: #0ff;
}
.box > span > h2{
/* 적용 안됨
.box > span > h2 보다
#hh22 가 우선순위가 높음
*/
background-color: #f0f;
}
.box > span > div > #hh22{
/* 적용됨
#hh22 보다
.box > span > div > #hh22 가 우선순위가 높음
*/
background-color: #f0f;
}
/*
자식 / 후손 선택자가 중첩될 경우
나중 작성된 스타일이 적용된다.
*/
.box > div > h3{
text-decoration: overline;
}
.box div h3{
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>01_child</h1>
<h2>h2 입니다</h2>
<h3>h3 입니다</h3>
<hr/>
<div class="box">
box 입니다 1
<h2>box > h2 입니다 2</h2>
<h3>box > h3 입니다 3</h3>
<div>
box > div 입니다 4
<h2>box > div > h2 입니다 5</h2>
<h3>box > div > h3 입니다 6</h3>
</div>
</div>
<hr/>
<div class="box">
box 입니다 7
<span>
box > span 입니다 8
<h2 id="hh22">box > span > h2 입니다 9</h2>
<h3>box > span > h3 입니다 10</h3>
<div>
box > span > div 입니다 11
<h2 id="hh22">box > span > div > h2 입니다 12</h2>
<h3>box > span > div > h3 입니다 13</h3>
</div>
</span>
</div>
</body>
</html>
선택자 > 선택자
⌨️ 문법
div > span {}
- 자식(자손)선택자 바로 아래 하나만 지정
## 선택자 선택자 {}
>### ⌨️ 문법div span {}
- 후손선택자 자식 중 동일한 모든 선택자
# 동위(형제) 선택자
03_brother
난 h2
난 h3 1
난 h3 2
난 h3 3
난 h3 4
난 h3 5
난 h3 6
난 h4
난 h3 1
난 h3 2
난 h3 3
난 h3 4
난 h3 5
난 h3 6
```선택자+선택자
⌨️ 문법
h2+h3
- 바로 밑의 동위선택자 지정
- h2 아래 h3 지정
선택자~선택자
⌨️ 문법
h4~h3
- 이어지는 동위선택자 지정(여러 개일 수 있음)
- h4 아래 h3 모두 지정
구조선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_struct</title>
<style>
*{
margin: 0;
padding: 0;
}
tr:first-child{
text-decoration: underline;
}
td:first-of-type{
text-decoration: line-through;
}
tr:last-child{
font-size: 2rem;
}
td:last-of-type{
font-style: italic;
}
tr:nth-child(3){
height: 80px;
}
td:nth-of-type(3){
width: 200px;
}
tr:nth-child(3n){
background-color: #ff0;
}
td:nth-of-type(3n+1){
color: #f00;
}
tr:nth-child(even){/* 짝수 */
font-weight: 700;
}
td:nth-of-type(odd){/* 홀수 */
background-color: #0f0;
}
tr:nth-child(4) > td:nth-child(6){ /* 4_6 */
background-color: #0ff;
}
/* tr+tr+tr+tr > td:nth-child(6n){
background: aqua;
}
tr+tr+tr+tr+tr > td:nth-child(6n){
background: #fff;
}
tr+tr+tr+tr+tr+tr > td:nth-child(6n){
background: #ff0;
}
tr+tr+tr+tr+tr+tr+tr > td:nth-child(6n){
background: #fff;
} */
.wrapper{
width: 200px;
display: inline-block;
border: 1px solid #000;
}
span{
display: block;
}
.wrapper > div:nth-child(3){ /* 숫자를 먼저 센 후 타입을 살펴봄 */
background-color: #ff0;
}
.wrapper > div:nth-of-type(3){ /* 같은 타입에 해당하는 숫자를 셈 */
color: #f00;
}
</style>
</head>
<body>
<h1>05_struct</h1>
<table border="">
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
<td>1_5</td>
<td>1_6</td>
<td>1_7</td>
<td>1_8</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
<td>2_5</td>
<td>2_6</td>
<td>2_7</td>
<td>2_8</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
<td>3_5</td>
<td>3_6</td>
<td>3_7</td>
<td>3_8</td>
</tr>
<tr>
<td>4_1</td>
<td>4_2</td>
<td>4_3</td>
<td>4_4</td>
<td>4_5</td>
<td>4_6</td>
<td>4_7</td>
<td>4_8</td>
</tr>
<tr>
<td>5_1</td>
<td>5_2</td>
<td>5_3</td>
<td>5_4</td>
<td>5_5</td>
<td>5_6</td>
<td>5_7</td>
<td>5_8</td>
</tr>
<tr>
<td>6_1</td>
<td>6_2</td>
<td>6_3</td>
<td>6_4</td>
<td>6_5</td>
<td>6_6</td>
<td>6_7</td>
<td>6_8</td>
</tr>
<tr>
<td>7_1</td>
<td>7_2</td>
<td>7_3</td>
<td>7_4</td>
<td>7_5</td>
<td>7_6</td>
<td>7_7</td>
<td>7_8</td>
</tr>
</table>
<br>
<div class="wrapper">
<div>div_1</div>
<div>div_2</div>
<div>div_3</div>
<span>span</span>
<div>div_4</div>
</div>
<div class="wrapper">
<div>div_1</div>
<div>div_2</div>
<span>span</span>
<div>div_3</div>
<div>div_4</div>
</div>
<div class="wrapper">
<div>div_1</div>
<span>span</span>
<div>div_2</div>
<div>div_3</div>
<div>div_4</div>
</div>
</body>
</html>
선택자: first-child
⌨️ 문법
선택자:first-child
- 선택자 중 첫 번째 요소를 선택
선택자: last-child
⌨️ 문법
선택자:last-child
- 선택자 중 마지막 요소를 선택
선택자: nth-child(수열)
⌨️ 문법
선택자:nth-child()
- 선택자 중 수열 번째의 요소를 선택
선택자: nth-last-child(수열)
⌨️ 문법
선택자:nth-last-child()
- 선택자 중 마지막에서 수열 번째의 요소를 선택
선택자: first-of-type
⌨️ 문법
선택자:first-of-type()
- 형제 요소에서 같은 종류 중 첫 번째 요소
선택자: last-of-type
⌨️ 문법
선택자:last-of-type()
- 형제 요소에서 같은 종류 중 마지막 요소
선택자: nth-of-type
⌨️ 문법
선택자:nth-of-type()
- 형제 요소에서 같은 종류 중 수열 번째 요소
선택자: nth-last-of-type
⌨️ 문법
선택자:nth-last-of-type()
- 형제 요소에서 같은 종류 중 마지막에서 수열 번째 요소
