CSS 셀렉터
1.전체 셀렉터
| 구문 | 설명 |
|---|---|
| * | HTML 요소를 포함한 모든 요소를 선택 합니다. |
1
2
3
* {
color: red;
}
2.태그 셀렉터
| 구문 | 설명 |
|---|---|
| 태그명 | 지정된 태그명을 가지는 요소를 선택합니다. |
1
2
3
p {
color: red;
}
3.ID 셀렉터
| 구문 | 설명 |
|---|---|
| #id 어트리뷰트 값 | id 어트리뷰트 값을 지정하여 일치하는 요소를 선택합니다. |
id 어트리뷰트 값은 중복 될 수 없는 유일한 값입니다.
1
2
3
4
5
6
#p1{
color : red;
}
<p id = "p1">HELLO</p>
4.클래스 셀렉터
| 구문 | 설명 |
|---|---|
| .class 어트리뷰트 값 | class 어트리뷰트 값을 지정하여 일치하는 요소를 선택합니다. |
class 어트리뷰트 값은 중복 될 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.container {
color : red;
}
<div class ="container">
<p id = "p1">Hello</p>
</div>
// class 어트리뷰트 값이 text-large인 모든 요소를 선택
.text-large { font-size: 200%; }
// class 어트리뷰트 값이 text-red인 모든 요소를 선택
.text-red { color: red; }
<div>
<p class="text-center">Center</p>
<p class="text-large text-red">Hello</p>
</div>
HTML 요소에 class 어트리뷰트 값은 공백으로 구분하여 여러개를 지정 할 수 있습니다.
5.후손 셀렉터
| 구문 | 설명 |
|---|---|
| 셀렉터A 셀렉터B | 셀렉터A의 모든 하위 요소중 셀렉터 B와 일치하는 요소를 선택합니다. |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div p {
color : red;
}
<div>
<p>Hello1</p> <-- red
<p>Hello2</p> <-- red
<span><p>Hello3 3</p></span> <-- red
</div>
/*
위에 태그들은 div 태그안에 위치함으로 색상이 변경이 되고
아래에 있는 p태그는 div 태그밖에 위치 하므로 적용이 안됩니다.
*/
<p>Hello4</p> <-- default color
6.자식 셀렉터
| 구문 | 설명 |
|---|---|
| 셀렉터A > 셀렉터B | 셀렉터A의 모든 자식 요소중 셀렉터B와 일치하는 요소를 선택합니다. |
1
2
3
4
5
6
7
8
9
div > p {
color : red;
}
<div>
<p>Hello 1</p> <-- red
<p>Hello 2</p> <-- red
<span><p>Hello 3</p></span>
</div>
7.인접 형제 셀렉터
| 구문 | 설명 |
|---|---|
| 셀렉터A + 셀렉터B | 셀렉터A의 형제 요소중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택합니다. |
1
2
3
4
5
6
7
8
9
10
11
p + ul {
color : red;
}
<p>NodeBook</p>
<ul>
<li>MacBook AIR</li>
<li>MacBook PRO</li>
<li>MacBook MAX</li>
</ul>
8.일반 형제 셀렉터
| 구문 | 설명 |
|---|---|
| 셀렉터A ~ 셀렉터B | 셀렉터A의 형제 요소중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택합니다. |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
p ~ ul {
color : red;
}
<body>
<div>iPhone</div>
<ul>
<li>iPhone SE</li>
<li>iPhone 13</li>
<li>iPhone 13 pro</li>
</ul>
<p>NodeBook</p>
<ul>
<li>MacBook Air</li> <-- red
<li>MacBook Pro</li> <-- red
<li>MacBook Max</li> <-- red
</ul>
<h2>Tablet</h2>
<ul>
<li>iPAD Air</li> <-- red
<li>iPAD mini</li> <-- red
<li>iPAD Pro</li> <-- red
</ul>
</body>