/* class 속성의 값 중에서
   "alert"이라는 문자열이 포함된 모든 요소를 선택합니다. */
[class*="alert"] {
    background-color: darkblue;
    color: white;
}
<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 l e r t</p>
실제 적용된 모습
[class*="alert"] {
    background-color: darkblue;
    color: white;
}

/* 다음과 같이 작성해도 동일합니다. */
[class*='alert'] {
    background-color: darkblue;
    color: white;
}
/* class 속성의 값 중에서
   "alert"이라는 단어가 포함된 모든 요소를 선택합니다. */
[class~="alert"] {
    background-color: darkblue;
    color: white;
}
<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> <!-- 공백으로 구분된 단어가 아님 주의 -->
실제 적용된 모습
속성 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
[attribute*="value"] 1 12 1 3