[CSS] CSS Attribute 선택자 정리

HTML의 Attribute 값으로 특정 요소를 선택할 수 있다.

 

<a href="/" target="_blank">예시</a>

 

위 같은 HTML 마크업이 있다고 가정을 한다면, CSS에서는 target이라는 속성을 특정해서 선택해 스타일을 줄 수 있다.

 

✅ 주요 특성

[attr]

• 해당 attr을 갖고 있는 요소 선택
• a[target] : <a> 태그  중 target 속성을 갖고 있는 요소만 선택

 

[attr=value]

• attr의 값이 특정 value 인 요소 선택
• input[type="submit"] : <input> 태그 중 type 속성의 값이 submit인 요소만 선택

 

[attr~=value]

• attr의 값이 특정 value 가 아닌 요소 선택

 

[attr^=value]

• ^(캐럿) : value로 시작하는 요소 선택 (prefix)

 

[attr$=value]

• $(달러) : value로 끝나는 요소 선택 (postfix)

 

[attr*=value]

• *(star) : value를 적어도 하나포함하고 있는 요소 선택