【CSS】クラスの部分一致

• html

<ul class="list_nav_header">
  <li><a href="#">ABOUT.</a></li>
  <li><a href="#">FEATURE.</a></li>
  <li><a href="#">PROFILE.</a></li>
  <li><a class="btn_ico_mail" href="#">CONTACT.</a></li>
</ul>

• css

[class*="btn_ico"] {
    display: block;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 30px 0 60px;
    font: 400 18px/1em 'futura', 'noto sans japanese', sans-serif;
    background: #00CCFF;
    position: relative;
}

クラス名の btn_icoと含まれてる場合にスタイルを当てる。

[class*="btn_ico"][class*="mail"]:before {
    background: url(../img/ico/ico_mail.svg);
}

クラス名にbtn_icoとmailが含まれてる場合にスタイルを当てる。