CSS attribute selectors

css선택자가 굉장히 많더라.. 그 중에서도 attribute 선택자는 모르는 게 많아서 한 번 정리하고 가려 한다.

특성선택자 (attribute 선택자)

html 태그들을 보다보면

<div class="box" style="border:1px solid black" ></div>

이런 형태가 될 텐데 여기서 class, style과 같은 것을 보고 특성, 즉 attribute라고 칭한다. 그럼 특성선택자라고 하는 것은 이런 거를 가지고 있는 요소를 말하는 거겠지??

우선 MDN을 봤을 때 선택자를 크게 4가지로 나눈 것 같다.

1. 기본선택자
2. 그룹선택자
3. 결합자
4. 의사클래스/요소

기본 선택자로는 5가지 있는데(전체, id, class, 특성, 요소) 그 중 특성 선택자만 정리해보자.

예제는 MDN에서 가져왔다. MDN 짱😁

a[title] {
  color: purple;
}

a[href="https://example.org"] {
  color: green;
}

a[href*="example"] {
  font-size: 2em;
}

a[href^="http"]{
  font-decoration: underline;
}

a[href$=".org"] {
  font-style: italic;
}

a[class~="logo"] {
  padding: 2px;
}

a태그 중에서 []안에 있는 attribute에 해당하는 요소들을 선택하는데 하나하나 살펴보자.

a[title] {}
/* title이라는 attribute를 가진 a태그 선택 */

a[href="https://example.org"] {}
/* href의 value 값이 정확히 위 링크와 일치하는 a태그 선택 */

a[href*="example"] {}
/* href의 value값에 example이라는 단어가 포함되어 있는 a태그 선택 */

a[href$=".org"] {}
/* href의 value값이 .org라는 단어로 끝나는 a태그 선택 */

a[href^="http"] {}
/* href의 value값이 http라는 단어로 시작하는 a태그 선택 */

a[class~="logo"]{}
/* class의 value값이 정확히 logo와 일치하는 a태그 선택. */
/* a[class="logo]와의 차이점은 
a[class="logo"]는 logo라는 클래스 외에도 다른 값 있어도 선택
a[class~="logo]는 유일한 클래스가 logo여야지 선택 */

그 외에
[attr|=value]라는 것도 있는데 이거는 [attr~=value]이거나 value 바로 뒤에 -문자가 붙는 경우를 얘기한다고 하더라. MDN에서는 언어 서브코드 일치하는지 확인할 때 사용한다고 하더라.

[attr~=value]
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다. attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.
[attr|=value]
attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용합니다.
[attr^=value]
attr이라는 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
[attr$=value]
attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
[attr*=value]
attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.