CSS 속성 선택자

[att]
값에 관계 없이 해당 속성(att)을 가진 요소

[att=val]
속성(att)이 val인 요소. 이런 형태는 많이 봐서 쉽게 이해가 될 것입니다.
예) span[class="example"] ==> class가 정확하게 example인 span

[att~=val]
속성(att)의 값(val)이 공백으로 분리된 단어인 요소.
예) a[rel~="copyright"] { ... } - rel에 copyright 단어가 포함된 "a" 요소

[att|=val]
속성(att)의 값이 정확히 "val"이거나 "val"로 시작하고 곧바로 "-"(U+002D)이 붙는 경우. 다음 예를 살펴보면 쉽게 이해가 되실 것입니다.
예) a[hreflang|="en"] - hreflang 속성이 "en"으로 시작하는 "a" 요소: "en", "en-US", "en-scouse" 포함

다음 3개는 속성의 값 내의 하위 문자열 일치에 사용할 수 있는 추가 속성 선택자입니다.

[att^=val]
속성(att)이 "val"로 시작하는 요소.
예)
HTML:

<h1 rel="external-link yep">Attribute Begins</h1>

CSS:

h1[rel^="external"] { color: red; }

속성 rel의 값이 "external"로 시작하는 h1 요소.

[att$=val]
이것의 위의 경우와 반대로 속성(att)이 "val"로 끝나는 요소를 나타냅니다.
예) a[href$=".html"] - href 속성의 값이 ".html"로 끝나는 "a" 요소.

[att*=val]
속성의 값("val")이 한 번 이상 포함되어 있는 요소.
예) p[title*="hello"] - title 속성 내에 "hello"가 한 번 이상 나타나는 "p" 요소.

 

 

출저 : https://www.thewordcracker.com/miscellaneous/css-attribute-selectors/

CSS 속성 선택자 - 기타