CSS [attribute*=value] 선택자로 특정 값을 포함하는 요소 선택하기

CSS 속성 선택자란?

CSS에서는 속성 값에 특정 문자열이 포함되어 있는 요소를 선택할 때 [attribute*="value"] 선택자를 사용합니다. 여기서 별표(*)는 '포함한다'는 의미로, 속성 값의 어느 위치에든 지정한 값이 존재하면 해당 요소가 선택됩니다.

예를 들어 [alt*="tut"]라고 작성하면, alt 속성 값 안에 "tut"라는 문자열이 들어 있는 모든 이미지 요소에 스타일이 적용됩니다.

기본 문법

[속성명*="찾을값"] {
  /* 적용할 스타일 */
}

예제 코드

아래 예제는 alt 속성 값에 "tut"가 포함된 이미지에 주황색 테두리와 둥근 모서리를 적용합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      [alt* = "tut"] {
        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">
    <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" height="200" width="200" alt="my tutorials">
  </body>
</html>

실행 결과 설명

위 코드를 실행하면 두 번째 이미지의 alt 속성 값인 "my tutorials"에 "tut"가 포함되어 있으므로 주황색 테두리가 적용됩니다. 반면 첫 번째 이미지의 alt 값은 "tutor"로 "tut"가 포함되어 있지 않아(정확히는 "tutor"에는 "tut"가 포함되지 않음) 스타일이 적용되지 않습니다.

CSS [attribute*=value] 선택자로 특정 값을 포함하는 요소 선택하기

CSS 속성 선택자란?

기본 문법

예제 코드

실행 결과 설명

관련 속성 선택자 정리