[CSS] Selector 연습하기, 특성 선택자(Attribute Selector)

CSS Diner
https://flukeout.github.io/

음식을 주제로 Selector 연습을 재밌게 할 수 있는 자료이다.
총 32개의 문제를 풀면서 자연스럽게 선택자를 익힐 수 있는 형식이다.
그 중 후반 문제로 나온 특성 선택자에 대해서 정리해보겠다.

특성 선택자 Attribute Selector

주어진 특성의 존재 여부나 그 값에 따라 요소를 선택하는 것이다.

[attr^=value]

접두사로 특성값을 가지는 모든 요소를 선택한다.

Example
.toy[category^="Swim"] toy 클래스 요소 중에서 카테고리가 "Swimwear" 이거나 "Swimming"인 장난감을 선택할 수 있다.

[attr$=value]

접미사로 특성값을 가지는 모든 요소를 선택한다.

Example
img[src$=".jpg"] .jpg 형식의 모든 이미지를 선택한다.

[attr*=value]

특성값을 가지는 모든 요소를 선택한다.

Example
img[src*="/thumbnails/"] thumbnails 폴더에 있는 모든 이미지 요소를 선택한다.

특성 선택자 | MDN
https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors