CSSのクラス向けのワイルドカード【現役エンジニアが解説】

PROGRAM

今回は、CSSのクラス向けのワイルドカードについて、3種類に分け、簡単に解説していきます。

キーワードが含まれている

クラス名にキーワードが含まれている要素を対象にする場合、*を使います。

[class*=”キーワード”]でクラス名にキーワードが含まれている要素を指定できます。

span[class*="red"]{
    color:red;
}

上記のコードでは、span要素のクラス名にredが含まれている要素の文字色を赤色にしています。

キーワードで始まっている

クラス名がキーワードで始まっている要素を対象とする場合は、^を使います。

[class^=”キーワード”]でクラス名がキーワードで始まっている要素のみを指定できます。

span[class^="green-"]{
    color:green;
}

上記のコードでは、span要素のうち、クラス名がgreen-で始まっている要素に対し、文字色を緑色にしています。

キーワードで終わっている

クラス名がキーワードで終わっている要素を対象とする場合には、$を使います。

[class$=”キーワード”]でクラス名がキーワードで終わっている要素のみを対象にできます。

span[class$="-blue"]{
    color:blue;
}

上記のコードでは、span要素のうち、クラス名が-blueで終わっている要素を対象に、文字色を青色にしています。