CSSのクラス向けのワイルドカード【現役エンジニアが解説】
今回は、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で終わっている要素を対象に、文字色を青色にしています。