/* 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> <!-- 전체가 일치하면 선택 -->
실제 적용된 모습
[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>
<p class="warning-alert">warning-alert</p>
실제 적용된 모습