CSS [attribute~=”value”] 선택자 – 특정 단어을 포함하는 값이 있는 속성 선택

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

[attribute~="value"] 선택자는
지정된 attribute라는 이름의 속성이 value라는 단어를 포함하는 값이 있는 모든 요소를 선택합니다.

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

[attribute~="value"] 선택자는 값이 공백으로 구분된 단어 목록인 attribute 속성이 있는 요소를 나타냅니다.
그 중 하나는 정확히 value입니다. value에 공백이 포함되어 있으면 아무 것도 나타내지 않습니다(단어가 공백으로 구분되어 있으므로).
또한 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> <!-- 전체가 일치하면 선택 -->

HTML <p> 태그

구문

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

[attribute~="value"]
[attribute~='value']

CSS

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

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

참고 사항

[attribute~="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>
<p class="warning-alert">warning-alert</p>

속성에 관련된 선택자

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

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