CSS [attribute$="value"] 선택자 – 속성 값이 특정 문자열로 끝나는 요소 선택하기

[attribute$="value"] 선택자란?

CSS 속성 선택자 중 [attribute$="value"]는 지정한 속성의 값이 특정 문자열로 끝나는 모든 요소를 선택합니다. 예를 들어 이미지의 alt 속성이 "Connect"로 끝나는 요소만 골라 스타일을 적용할 수 있으며, 특정 접미사를 가진 파일명이나 링크를 구분할 때 특히 유용합니다.

기본 문법

선택자[속성$="값"] {
  /* 스타일 선언 */
}

예제 코드

아래 예제에서는 두 개의 이미지 중 alt 속성이 "Connect"로 끝나는 첫 번째 이미지에만 파란색 테두리가 적용됩니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    img[alt$="Connect"] {
      border: 3px solid blue;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <img src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" height="200" width="200" alt="Tutor Connect">
  <img src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" height="200" width="200" alt="Tutorials Library">
</body>
</html>

실행 결과

Tutor Connect 이미지 : alt 속성이 "Connect"로 끝나므로 파란색 테두리와 둥근 모서리(border-radius)가 함께 적용됩니다.
Tutorials Library 이미지 : alt 속성이 "Library"로 끝나므로 선택 조건에 맞지 않아 스타일이 적용되지 않습니다.

함께 알아두면 좋은 속성 선택자

[attribute^="value"] : 속성 값이 지정한 문자열로 시작하는 요소 선택
[attribute$="value"] : 속성 값이 지정한 문자열로 끝나는 요소 선택
[attribute*="value"] : 속성 값에 지정한 문자열이 포함된 요소 선택

이처럼 [attribute$="value"] 선택자를 활용하면 별도의 클래스나 ID를 추가하지 않고도 속성 값의 끝부분 패턴만으로 원하는 요소를 정확하게 스타일링할 수 있습니다.