[CSS] Attribute Selector

CSS 속성 선택자 - Attribute Selector 대해 알아보자.

지금까지 계속 [class*=""] 하나만 사용해왔는데
다른 속성 선택자들도 알아두면 좋을 것 같아서 정리끄적✍

---

참고 : w3schools.com

[attribute]

a[target] {color: purple;}
a[href] {color: purple;}
a[title] {color: purple;}

a태그에 target, href, title이라는 속성을 가진 요소들에게 따로 스타일 적용 가능
위처럼 해당 속성을 가진 태그를 불러와 원하는 스타일을 줄 수 있다.

[attribute=”value”]

a[target="_blank"] {color: purple;}
a[href="url"] {color: purple;}
a[title="study"] {color: purple;}
a[class="name"] {color: purple;}

속성의 값이 정해진 것들의 스타일을 적용할 수도 있는데,
위같은 경우는 값이 정확히 일치해야 적용이 된다.

👇아래부터는 가장 많이 사용되는 class 선택자로 예시를 들어보겠다.
(거의 이것만 쓰이긴함)

[attribute~=”value”]

a[class~="btn"] {color: purple;}

위처럼 ~ 이 추가되면, value값이 들어가는 모든 class요소를 가져올 수 있다.

<a class="btn"></a>  ⭕
<a class="page-next-btn"></a>  ⭕
<a class="btn-more"></a>  ⭕

btn이 들어간 class요소 전체를 가져와 스타일링 할 수 있다.

[attribute|=”value”]

a[class|="btn"] {color: purple;}

위처럼 |(백슬래쉬) 가 추가되면, value값으로 시작되는 class를 가져올 수 있다.
단, 하이픈으로 구분되는 것만 가져올 수 있으니 주의!

<a class="btn"></a>  ⭕
<a class="page-next-btn"></a>  ❌
<a class="btn-more"></a>  ⭕
<a class="btn link"></a>  ❌

btn으로 시작하되 하이픈으로 구분되어있는(단독이여도 가능)
요소를 가져와 스타일링 할 수 있다.

[attribute^=value]

a[class^="btn"] {color: purple;}

위처럼 ^ 가 추가되면, value값으로 시작되는 모든 class를 가져올 수 있다.

<a class="btn"></a>  ⭕
<a class="page-next-btn"></a>  ❌
<a class="btn-more"></a>  ⭕
<a class="btn link"></a>  ⭕
<a class="link btn"></a>  ❌

btn으로 시작하는 class요소 전체를 가져와 스타일링 할 수 있다.

[attribute$=value]

a[class$="btn"] {color: purple;}

위처럼 $ 가 추가되면, value값으로 끝나는 모든 class를 가져올 수 있다.

<a class="btn"></a>  ⭕
<a class="page-next-btn"></a>  ⭕
<a class="btn-more"></a>  ❌
<a class="btn link"></a>  ❌
<a class="link btn"></a>  ⭕

btn으로 끝나는 class요소 전체를 가져와 스타일링 할 수 있다.

[attribute*=value]

a[class*="btn"] {color: purple;}

위처럼 * 이 추가되면, value값을 가진 모든 class를 가져올 수 있다.

<a class="btn"></a>  ⭕
<a class="page-next-btn"></a>  ⭕
<a class="btn-more"></a>  ⭕
<a class="btn link"></a>  ⭕
<a class="link btn"></a>  ⭕

btn을 가진 class요소 전체를 가져와 스타일링 할 수 있다.
개인적으로 제일 많이 사용하는 선택자인 듯 하다👍