cssでワイルドカードとか使う

nobi

7年前

こんなHTMLがあったとする

<a href="#" class="btn-default">
    Default
</a>
<a href="#" class="btn-worning">
    Worning
</a>
<a href="#" class="btn-info">
    Info
</a>

すべて aタグにスタイルを適用するには、通常は全てのクラスに対してスタイルを指定するが

a.btn-default,
a.btn-worning,
a.btn-info{
    border-radius: 8px;
    display: inline-block;
    padding: 4px 8px;
}

以下のようにも書ける

/* クラスの先頭が "btn-" で始まっている場合 */
a[class*="btn-"] { 
    border-radius: 8px;
    display: inline-block;
    padding: 4px 8px;
}
/* クラスが ”-” で区切られている場合 */
a[class|="btn"] { 
    border-radius: 8px;
    display: inline-block;
    padding: 4px 8px; 
}

参考
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors