태그 안에서 사용하는 속성값에 따라 요소를 선택 하는 역할을 한다.
[속성] 선택자 : 특정 속성이 있는 요소를 선택
HTML 태그를 작성할 때 여러 가지 속성을 함께 사용한다.
그 속성값에 따라 원하는 요소를 선택할 수도 있다.
이때 사용하는 것이 [속성] 선택자인데, 대괄호 사이에 원하는 속성을 입력하면 된다.
예를 들어 a 요소 중에서 href 속성이 있는 요소를 선택하려면 다음과 같이 작성한다.
a[herf] { ...... }<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
a[href] {color: red;}
</style>
</head>
<body>
<a>a tag 1</a>
<a href="">a tag 2</a>
<a href="#">a tag 3</a>
</body>
</html>
[속성=속성값] 선택자 : 특정 속성값이 있는 요소를 선택
주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용.
이 형식은 대괄호 안에 속성과 속성값을 넣고 그 사이에 '=' 기호를 표시.
예를 들어 a 요소 중에서 target 속성값이 '_blank' 인 것만 선택하고 싶다면 다음과 같이 작성한다.
a[target = _blank] { ......}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
a[target=_blank] {color: red;}
</style>
</head>
<body>
<a>a tag 1</a>
<a href="#" target="_blank">a tag 2</a>
</body>
</html>
특정 속성값이 포함된 속성 요소를 선택하는 선택자
| 종류 | 선택요소 | 예시 |
| [속성] | 해당 속성이 있는 요소 | a[href] { ......} ... <a href="#"></a> |
| [속성 = 값] | 지정한 속성쌍을 갖는 요소 | a[class=asdf] { ...... } <a class="asdf"></a> |
| [속성 ~= 값] | 지정한 속성값이 포함된 요소 단, 하이픈으로 연결된 버전은 인정 안됨. |
a[class=asdf] { ...... } <a class="asdf qwre"></a> |
| [속성 |= 값] | 지정한 값을 속성값으로 갖거나, 지정한 값에 하이픈으로 이어지는 속성값을 가지는 요소. |
a[class=asdf] { ...... } <a class="asdf"></a> <a class="asdf-qwer"></a> |
| [속성 ^= 값] | 속성값이 지정한 값으로 시작하는 요소 | a[class=asdf] { ...... } <a class="asdfqhbisd"> |
| [속성 $= 값] | 지정한 속성값으로 끝나는 요소 | a[class=asdf] { ...... } <a class="qwtghiasdf"> |
| [속성 *= 값] | 속성값이 지정한 값을 어떻게든 포함하는 요소 | a[class=asdf] { ...... } <a class="qgihasdfqgwh"> |
예시로 폼 요소 중 필수입력필드(required)는 빨간색 테두리로 강조하는 작업을 이 선택자로 수행할 수 있다.
input 태그에 required 속성이 있다면 필수입력필드인 것이다.
따라서 input[required] 로 선택하고 스타일을 지정해주면 된다.
'📁Web Developing > CSS 기초' 카테고리의 다른 글
| VI. 트랜지션과 애니메이션 - 1. 변형 (0) | 2022.06.07 |
|---|---|
| V. 고급선택자 - 3. 가상 클래스와 가상 요소 (0) | 2022.06.06 |
| V. 고급선택자 - 1. 연결 선택자 (0) | 2022.06.06 |
| IV. 배경꾸미기 - 3. 그라데이션 효과로 배경 꾸미기 (0) | 2022.06.06 |
| IV. 배경꾸미기 - 2. 배경 이미지 지정하기 (0) | 2022.06.05 |
댓글