[CSS] Attribute Selector

---

속성을 이용한 CSS 셀렉터는 거의 사용하지 않아서 잊어버렸는데, CSS Diner라는 귀여운 게임을 찾은 김에 Attribute만을 통해 셀렉트하는 방법을 정리해두면 좋을 것 같았다.

A[attribute]

a[href]
input[disabled]
input[type='checkbox']

태그 네임, 클래스 네임, ID 등등 다른 CSS 선택자와 Attribute Selector를 함께 쓰는 방식이다. 위 예시는 href='anything'인 a 태그를 선택하거나 disabled 속성을 가진 input을 선택한다.

[Attribute]

[value] { .. }

value라는 attribute를 가진 요소를 선택한다.

^, $, *

[attribute^='value']
.toy[category^='Swim']

'value'로 시작하는 속성을 모두 선택한다. 두 번째 예시는 .toy 클래스 네임을 가진 요소 중, category 속성이 'Swim'으로 시작하는 모든 요소를 선택한다. category='Swimwear' 또는 category='Swimming' 모두 선택될 수 있다.

[attribute$='value']
img[src$='.jpg']

'value'로 끝나는 속성을 모두 선택한다. 두 번째 예시는 img 태그 네임 셀렉트로 선택된 요소 중 src 속성이 .jpg로 끝나는 경우만 선택한다.

[attribute*='value']
img[src*='/thumbnails/']
[class*='heading']

1. 'value'라는 글자가 포함된 모든 속성을 선택한다.
2. thumbnails라는 폴더 경로를 가진 모든 이미지를 선택한다.
3. 클래스에 'heading'이 들어간 모든 요소를 선택한다. class='main-heading'이나 class='sub-heading' 같은 요소들이 선택될 수 있다.

출처

flukeout.github.io