CSS [attribute*=”value”] 선택자 – 특정 문자열을 포함하는 값이 있는 속성 선택

`[attribute*="value"]` 선택자

[attribute*="value"] 선택자는
지정된 attribute라는 이름의 속성이 value라는 문자열(문자들의 나열)을 포함하는 값이 있는 모든 요소를 선택합니다.

예를 들어, [class*="alert"]은 class="alert caution", class="warning-alert" 등의 속성과 값이 있는 요소들을 모두 선택합니다.

[attribute*="value"] 선택자는 값에 하위 문자열 value가 하나 이상 포함되어 있는 attribute 속성이 있는 요소를 나타냅니다.
attribute 속성의 값이 빈 문자열("")이면 선택자는 아무 것도 나타내지 않습니다.

지정된 속성의 이름은 대소문자를 구분하지 않지만, 값은 대소문자를 구분합니다.

예제

CSS

/* class 속성의 값 중에서
   "alert"이라는 문자열이 포함된 모든 요소를 선택합니다. */
[class*="alert"] {
    background-color: darkblue;
    color: white;
}

HTML class 속성 - 올바른 이해와 사용 방법

HTML

<p class="alert cuation">alert cuation</p>
<p class="warning alert">warning alert</p>
<p class="alert-cuation">alert-cuation</p>
<p class="alertcuation">alertcuation</p>
<p class="warning-alert">warning-alert</p>
<p class="warningalert">warningalert</p>
<p class="alert">alert</p>
<p class="alert">awesome a l e r t</p>

HTML <p> 태그

구문

다음의 두 가지 형태는 모두 동일합니다.

[attribute*="value"]
[attribute*='value']

CSS

[class*="alert"] {
    background-color: darkblue;
    color: white;
}

/* 다음과 같이 작성해도 동일합니다. */
[class*='alert'] {
    background-color: darkblue;
    color: white;
}

참고 사항

[attribute*="value"]는 값에 하위 문자열 value가 하나 이상 포함되어 있는 요소를 선택하지만, [attribute~="value"] 선택자는 문자열이 아닌 단어가 포함되어 있는 요소를 선택합니다.

[attribute~=”value”] 속성 선택자

CSS

/* class 속성의 값 중에서
   "alert"이라는 단어가 포함된 모든 요소를 선택합니다. */
[class~="alert"] {
    background-color: darkblue;
    color: white;
}

HTML

<p class="alert cuation">alert cuation</p>
<p class="warning alert">warning alert</p>
<p class="alert-cuation">alert-cuation</p> <!-- 공백으로 구분된 단어가 아님 주의 -->
<p class="alertcuation">alertcuation</p> <!-- 공백으로 구분된 단어가 아님 주의 -->

속성에 관련된 선택자

다음은 [attribute*="value"] 선택자 이외의 속성에 관련된 선택자들입니다.

속성에 관련된 선택자
[attribute]	이름이 일치하는 속성 선택
[attribute="value"]	이름과 값이 일치하는 속성 선택
[attribute~="value"]	특정 단어을 포함하는 값이 있는 속성 선택
[attribute^="value"]	특정 값으로 시작하는 속성 선택
[attribute$="value"]	특정 값으로 끝나는 속성 선택