CSS [attribute|="value"] 선택자로 특정 값으로 시작하는 속성을 가진 요소 선택하기

CSS에서 [attribute|="value"] 선택자를 사용하면 지정된 속성값이 특정 값과 정확히 일치하거나, 그 값 뒤에 하이픈(-)이 이어지는 형태로 시작하는 요소를 선택할 수 있습니다.

예를 들어 [alt|="Tutor"]라고 작성하면, alt 속성값이 "Tutor"이거나 "Tutor-Connect"처럼 "Tutor" 다음에 하이픈이 붙는 모든 요소가 대상이 됩니다.

[attribute|="value"] 선택자 예제

아래 코드를 직접 실행해 보면 CSS [attribute|="value"] 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         [alt |= Tutor] {
            border: 5px solid orange;
            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>

코드 설명

[alt |= Tutor] — alt 속성값이 "Tutor"와 일치하거나 "Tutor-" 형태로 시작하는 요소를 선택합니다.
첫 번째 이미지(alt="Tutor-Connect")는 조건에 부합하므로 주황색 테두리와 둥근 모서리가 적용됩니다.
두 번째 이미지(alt="Tutorials-Library")는 "Tutor" 바로 뒤에 하이픈이 없기 때문에 선택되지 않습니다.

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

[attribute^="value"] — 지정된 값으로 시작하는 모든 속성값을 매칭합니다(하이픈 제한 없음).
[attribute$="value"] — 지정된 값으로 끝나는 속성값을 매칭합니다.
[attribute*="value"] — 속성값 어디든 지정된 값이 포함되어 있으면 매칭합니다.