HTML 요소 속성으로 요소 선택하기

CSS에서는 HTML 요소에 지정된 특정 속성 존재 여부와 그 값에 따라 요소를 선택할 수 있는 속성 선택자가 있습니다.
다양한 속성 선택자의 종류와 특징을 확인할 수 있다.

속성 선택자의 종류와 특징

CSS에서 속성 선택자는 크게 세 가지 부류로 나눌 수 있습니다.

  • 일반 속성 선택자 [attr] 계열: 대괄호([])를 사용하여 요소를 속성으로 선택했다는 것을 식별하기 위한 가장 일반적인 속성 선택자
  • 아이디 선택자 #id: HTML 문서에서 유일하게 지정되는 고유 식별자 속성인 id로 선택했다는 것을 식별하기 위한 속성 선택자
  • 클래스 선택자 .class: HTML 문서에서 요소를 분류해서 식별하고 선택하여 스타일링하는 데 가장 많이 사용되는 속성인 class로 선택했다는 것을 식별하기 위한 속성 선택자

일반 속성 선택자 [attr] 계열

대괄호([])를 사용하여 특정 속성의 존재 여부나 값에 따라 요소를 선택할 수 있습니다.
대괄호([])는 요소를 속성으로 선택했다는 것을 식별하기 위한 가장 일반적인 속성 선택자 형태입니다.

일반 속성 선택자 [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
선택자 설명 예시
#id 지정된 id 값과 일치하는 id 속성을 가진 요소를 선택합니다. 대소문자를 구분합니다. #chapter는 id 속성이 값이 chapter와 일치하는 요소를 선택하는 선택자입니다.

참고 사항

#id_value 선택자와 [attribute="value"] 선택자로 선택한 요소는 동일하지만,
#id_value 선택자는 [attribute="value"] 선택자보다 스타일 우선순위를 지정하는 구체성 값('명시도'라고도 부름)이 크다는 차이점이 있습니다.

CSS 선택자의 구체성 값

동일한 요소를 #id_value 선택자와 [attribute="value"] 선택자로 선택하면, 우선순위가 높은 #id_value 선택자로 지정한 스타일이 적용됩니다.

CSS 
#chapter { /* 구체성 값: 0, 1, 0, 0 */
    background-color: orange; /* 이 스타일이 적용됩니다. */
}
[id="chapter"] { /* 구체성 값: 0, 0, 1, 0 */
    background-color: green;
}
HTML 
<p id="chapter">id 값이 chapter입니다.</p>
실제 적용된 모습

클래스 선택자 .class

HTML 문서에서 요소를 분류해서 식별하고 선택하여 스타일링하는 데 가장 많이 사용되는 속성인 class로 선택했다는 것을 식별하기 위한 속성 선택자입니다.

아이디 선택자 #id
선택자 설명 예시
.class 지정된 class 이름의 클래스가 있는 요소를 모두 선택합니다. 대소문자를 구분합니다. .alert은 alert이라는 이름의 클래스가 있는 모든 요소를 선택하는 선택자입니다.
참고 사항

.class 선택자와 [attribute~="value"] 선택자는 동일한 요소를 선택합니다.
그리고, 스타일 우선순위를 지정하는 구체성 값도 동일합니다.

브라우저 호환성

속성 선택자들의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
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

참고문헌