CSS에서 선택자는 스타일을 지정할 요소를 선택하는 데 사용되는 패턴입니다. 이를 통해 특정 요소를 선택하여 스타일을 적용할 수 있게 됩니다
[속성] 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<a href="https://www.naver.com/">naver.com</a>
<a href="https://www.daum.net/" target="_blank">daum.net</a>
<a href="http://www.president.go.kr/" target="_top">president.go.kr</a>
</body>
|
cs |
a태그의 [target] 속성을 선택합니다.
= <a href="https://www.daum.net/" target="_blank">daum.net</a>
<a href="http://www.president.go.kr/" target="_top"> president.go.kr </a>
[속성=값] 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<head>
<style>
a[target="_blank"] {
background-color: yellow;
}
a[target="_top"] {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.naver.com/">naver.com</a>
<a href="https://www.daum.net/" target="_blank">daum.net</a>
<a href="http://www.president.go.kr/" target="_top">president.go.kr</a>
</body>
|
cs |
a태그의 [target="_blank"]과 [target="_top"] 속성을 선택합니다.
= <a href="https://www.daum.net/" target="_blank"> daum.net </a> ☞ 노란색
<a href="http://www.president.go.kr/" target="_top"> president.go.kr </a> ☞ 빨간색
[속성~=값] 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flowers] {
border: 5px solid blue;
}
</style>
</head>
<body>
<div title="hi" style="width: 90px;height: 90px;">반갑습니다</div>
<div title="flowers" style="width: 90px;height: 90px;">장미꽃</div>
<div title="title flowers" style="width: 90px;height: 90px;">할미꽃</div>
<div title="flower" style="width: 90px;height: 90px;">개나리</div>
<div title="dog" style="width: 90px;height: 90px;">하얀마음 백구</div>
</body>
</html>
|
cs |
단어 "flowers"를 포함하는 title 속성으로 요소를 선택하고 스타일을 지정합니다.
여러 개의 title이 지정되어 있어도 flowers라는 단어가 포함되어 있다면 선택합니다.
= <div title="flowers" style="width: 90px;height: 90px;"> 장미꽃 </div>
<div title="title flowers" style="width: 90px;height: 90px;"> 할미꽃 </div>
[속성|=값] 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<head>
<style>
[a|=en] {
background: yellow;
}
</style>
</head>
<body>
<p a="en">Hello!</p>
<p a="en-us">Hi!</p>
<p a="en-gb">Ello!</p>
<p a="us">Hi!</p>
<p a="no">Hei!</p>
</body>
|
cs |
a속성 값이 "en"으로 시작하는 요소를 선택하되 하이픈으로 구분해 더 많고 다양한 요소의 스타일을 지정합니다.
즉 Hello!, Hi!, Ello! 3개의 p태그가 선택됩니다
[속성^=값] 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<style>
[class^=kor] {
background: yellow;
}
</style>
</head>
<body>
<p class="korea">Hello!</p>
<p class="korea-good">Hi!</p>
<p class="apple_kor">Ello!</p>
<p class="kor">Hi!</p>
<p class="korea_">Hei!</p>
</body>
</html>
|
cs |
class 속성 값 중 kor로 '시작'하는 요소를 선택합니다. 속성 값이 지정된 값으로 시작하는 모든 요소에 스타일 지정이 가능합니다.
=<p class="korea"> Hello! </p>
<p class="korea-good"> Hi! </p>
<p class="kor"> Hi! </p>
<p class="korea_"> Hei! </p>
[속성$=값] 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<style>
div[class$="test"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>
</html>
|
cs |
div 속성 값 중 test로 '끝나는' 요소를 선택합니다
=<div class="first_test"> The first div element. </div>
<div class="test"> The third div element. </div>
[속성*=값] 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<style>
div[class*="test"] {
background: #ffff00;
}
</style>
</head>
<body>
<div class="first_test">The first div element.</div>
<div class="divtestgood">The second div element.</div>
<div class="te">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>
</html>
|
cs |
div 속성 값 중 test가 포함된 모든 요소를 선택합니다 어떤 식으로 조합이 되어있더라도 test라는 단어만 완벽하다면 무조건 선택됩니다.
=<div class="first_test"> The first div element. </div>
<div class="divtestgood"> The second div element. </div>
'CSS' 카테고리의 다른 글
| float속성 / float,clear (0) | 2020.04.13 |
|---|---|
| 여백을 조절하는 속성 / margin,padding (0) | 2020.04.12 |
| 가상 선택자 (0) | 2020.04.07 |
| 박스 모델의 개념 / <display>,<width>,<height > (0) | 2020.03.31 |
| CSS3 기본 사용법 (0) | 2020.03.23 |
