속성 선택자(attribute selector) 란?

관련 문서

<a href="https://velog.io">Velog</a>

CSS 속성 선택자를 사용하여 특정 속성으로, 해당 element를 타겟팅한다.

a[href="https://velog.io"] {
  color: #FFFFFF;
}

존재여부 및 값 선택자

이 선택자는 특정 속성의 존재여부 및 값 일치 여부에 따라 선택한다.

[attr] - 속성 선택

해당 속성을 가진 element들을 선택한다.

예를 들어, a[title] 일 경우, title 속성을 가진 모든 a태그를 선택한다.

[attr=”value”] - 속성이 value라는 문자열일 경우 선택

해당 속성값이 정확히 "value"와 일치하는 모든 element들을 선택한다.

예를 들어, a[href="https://velog.io"] 일 경우, href 속성이 "https://velog.io" 인 모든 a태그를 선택한다.

[attr~=”value”] - 속성이 특정 값이 공백을 통해 분리된 별도의 값이 value라는 문자열 일 경우 선택

해당 속성값이 정확히 하나 또는 그 이상의 "value"를 포함하는 모든 element들을 선택한다. 단 "value"는 공백을 통해 분리가 돼있어야 한다.

[alt~="ohmygirl"]

alt="ohmygirl good" : yes
alt="ohmygirlgood" : no

[attr|=”value”] - "-" 대시로 구분된 값의 첫번째 값이 value라는 문자열일 경우 선택

해당 속성값이 정확히 "value-"를 포함하는 모든 element들을 선택한다.

예를 들어, li[attr-years|="2000"] 일 경우, attr-year의 값이 "2000-2001", "2000-??"인 element 들이 선택된다.

[alt|="ohmygirl"]

alt="ohmygirl-good" : ohmygirl

부분 문자열 매칭 선택자

부분 문자열 선택자를 사용하면 속성 값 내에서 고급 매칭이 가능하다.

[attr*=”value”] - 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 선택

값이 문자열 내에서 하나 이상의 하위 문자열 값 발생을 포함하는 속성 이름이 attr 인 모든 요소와 일치한다.

예를 들어, img[alt*="car"] 는 "car"가 포함된 img 태그들을 선택할 것이다. “fast car”, “car engineer” 그리고 “carcenter” 등이 선택된다.

[attr^=”value”] - 속성 값이 value라는 문자열로 시작할 경우 선택

값 시작 부분에 ”value”가 포함된 모든 element를 선택한다.

예들 들어, li[class^=”error-”] 는 .error-date, .error-message 들을 선택한다.

[attr$=”value”] - 속성 값이 value라는 문자열로 끝날 경우 선택

값 끝 부분에 ”value”가 포함된 모든 element를 선택한다.

예들 들어, a[href$=”pptx”] 는 a 태그의 href 속성값이 pptx로 끝나는 모든 element들이 선택되도록 한다.

대소문자 구분

지금까지 모든 검사는 대소 문자를 구분했다.

[b="xyz" i] 처럼 닫는 대괄호 앞에 i를 추가하면 대소 문자를 구분하지 않는다.
(미지원 브라우저 리스트 : 관련 문서)

속성 선택자 결합

속성 선택자는 tag, class, id 와 같은 선택자와 결합 가능하다.

div[attr="value"] {
  /* style rules */
}

.item[attr="value"] {
  /* style rules */
}

#header[attr="value"] {
  /* style rules */
}

img[alt~="car"][src*="korea"] {
  /* style rules here */
}