HTML 요소 속성으로 요소 선택하기
CSS에서는 HTML 요소에 지정된 특정 속성 존재 여부와 그 값에 따라 요소를 선택할 수 있는 속성 선택자가 있습니다.
다양한 속성 선택자의 종류와 특징을 확인할 수 있다.
속성 선택자의 종류와 특징
CSS에서 속성 선택자는 크게 세 가지 부류로 나눌 수 있습니다.
일반 속성 선택자 [attr] 계열
대괄호([])를 사용하여 특정 속성의 존재 여부나 값에 따라 요소를 선택할 수 있습니다.
대괄호([])는 요소를 속성으로 선택했다는 것을 식별하기 위한 가장 일반적인 속성 선택자 형태입니다.
| 선택자 | 설명 | 예시 |
|---|---|---|
[attribute] |
지정된 attribute와 이름이 일치하는 속성을 가진 모든 요소를 선택합니다. |
[title]은 문서내의 title 속성을 가진 모든 요소를 선택하는 선택자입니다. |
[attribute="value"] |
지정된 attribute라는 이름의 속성 값이 value와 일치하는 모든 요소를 선택합니다. |
[target="_blank"]는 문서내의 target 속성의 값이 _blank와 일치하는 모든 요소를 선택하는 선택자입니다. |
[attribute*="value"] |
지정된 attribute라는 이름의 속성이 value라는 문자열(문자들의 나열)을 포함하는 값이 있는 모든 요소를 선택합니다. |
[class*="alert"]은 class="alert caution", class="warning-alert" 등의 속성과 값이 있는 요소들을 모두 선택합니다. |
[attribute~="value"] |
지정된 attribute라는 이름의 속성이 value라는 단어를 포함하는 값이 있는 모든 요소를 선택합니다. |
[class~="alert"]은 class="alert caution", class="warning alert" 등의 속성과 값이 있는 요소들을 모두 선택합니다. 하지만, class="warning-alert"과 같이 단어의 일부만 포함할 경우에는 선택하지 않습니다. |
[attribute^="value"] |
지정된 attribute라는 이름의 속성이 value라는 값으로 시작하는 모든 요소를 선택합니다. |
[href^="#"]은 href="#subject-1", href="#contact"처럼 href 속성의 값이 #으로 시작하는 모든 요소를 선택합니다. |
[attribute$="value"] |
지정된 attribute라는 이름의 속성이 value라는 값으로 끝나는 모든 요소를 선택합니다. |
[href$=".html"]은 href="home.html", href="contact.html"처럼 href 속성의 값이 .html로 끝나는 모든 요소를 선택합니다. |
지정된 속성의 이름은 대소문자를 구분하지 않지만, 값은 대소문자를 구분합니다.
아이디 선택자 #id
HTML 문서에서 유일하게 지정되는 고유 식별자 속성인 id로 선택했다는 것을 식별하기 위한 속성 선택자입니다.
참고 사항
#id_value 선택자와 [attribute="value"] 선택자로 선택한 요소는 동일하지만,
#id_value 선택자는 [attribute="value"] 선택자보다 스타일 우선순위를 지정하는 구체성 값('명시도'라고도 부름)이 크다는 차이점이 있습니다.
동일한 요소를 #id_value 선택자와 [attribute="value"] 선택자로 선택하면, 우선순위가 높은 #id_value 선택자로 지정한 스타일이 적용됩니다.
#chapter { /* 구체성 값: 0, 1, 0, 0 */
background-color: orange; /* 이 스타일이 적용됩니다. */
}
[id="chapter"] { /* 구체성 값: 0, 0, 1, 0 */
background-color: green;
}
<p id="chapter">id 값이 chapter입니다.</p>
id 값이 chapter입니다.
클래스 선택자 .class
HTML 문서에서 요소를 분류해서 식별하고 선택하여 스타일링하는 데 가장 많이 사용되는 속성인 class로 선택했다는 것을 식별하기 위한 속성 선택자입니다.
| 선택자 | 설명 | 예시 |
|---|---|---|
.class |
지정된 class 이름의 클래스가 있는 요소를 모두 선택합니다. 대소문자를 구분합니다. |
.alert은 alert이라는 이름의 클래스가 있는 모든 요소를 선택하는 선택자입니다. |
참고 사항
.class 선택자와 [attribute~="value"] 선택자는 동일한 요소를 선택합니다.
그리고, 스타일 우선순위를 지정하는 구체성 값도 동일합니다.
브라우저 호환성
| 속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
[attribute] |
1 | 12 | 1 | 3 |
[attribute="value"] |
1 | 12 | 1 | 3 |
[attribute*="value"] |
1 | 12 | 1 | 3 |
[attribute~="value"] |
1 | 12 | 1 | 3 |
[attribute^="value"] |
1 | 12 | 1 | 3 |
[attribute$="value"] |
1 | 12 | 1 | 3 |
#id |
1 | 12 | 1 | 1 |
.class |
1 | 12 | 1 | 1 |
명세서
| 명세서 사양 | |
|---|---|
| 일반 속성 선택자 [attr] 계열 |
Selectors Level 4 #attribute-selectors |
#id_value
|
Selectors Level 4 #id-selectors |
.class_name
|
Selectors Level 4 #class-html |