もう迷わない！CSSで特定の文字列を含むクラス名をスマートに操作

2024-04-25

CSS で特定の文字列で始まるクラス名を持つすべての要素を一致させる方法

前方一致セレクタは、属性値が特定の文字列で始まる要素を選択するセレクタです。記法は以下の通りです。

[属性名^="文字列"] {
  /* スタイル */
}

この場合、属性名 は一致させたい属性名、文字列 は一致させたい文字列の先頭部分を表します。

例えば、すべての .icon- で始まるクラス名を持つ要素に赤い色を設定したい場合は、以下の CSS を記述します。

.icon- * {
  color: red;
}

この CSS は、.icon-star, .icon-user, .icon-search のようなすべての要素に適用されます。

前方一致セレクタ以外にも、以下の方法で特定の文字列で始まるクラス名を持つ要素を一致させることができます。

ワイルドカードを使用する: [属性名*="文字列"] を使用すると、属性値が 文字列 を含むすべての要素が一致します。
正規表現を使用する: CSS3 では、正規表現を使用して属性値を一致させることができます。

注意事項

前方一致セレクタは、パフォーマンスが遅くなる可能性があります。多くの要素を一致させる必要がある場合は、別の方法を使用することを検討してください。
前方一致セレクタは、IE8 以前の古いブラウザではサポートされていません。

<!DOCTYPE html>
<html>
<head>
<style>
  /* すべての `.icon-` で始まるクラス名を持つ要素に赤い色を設定 */
  .icon- * {
    color: red;
  }

  /* `.icon-star` クラスを持つ要素に太字を設定 */
  .icon-star {
    font-weight: bold;
  }
</style>
</head>
<body>
  <i class="icon-star">スター</i>
  <i class="icon-user">ユーザー</i>
  <i class="icon-search">検索</i>
</body>
</html>

このコードを実行すると、以下のようになります。

.icon-star アイコンは太字で赤く表示されます。

説明

このコードでは、以下の CSS ルールを使用しています。

/* すべての.icon-で始まるクラス名を持つ要素に赤い色を設定 */

このルールは、前方一致セレクタ [class^="icon-"] を使用して、すべての .icon- で始まるクラス名を持つ要素を選択します。そして、これらの要素に color: red; プロパティを設定することで、赤い色に設定します。

この例は、前方一致セレクタを使用して、特定の文字列で始まるクラス名を持つすべての要素にスタイルを適用する方法を理解するためのものです。実際の状況に合わせて、コードを調整する必要があります。

CSS で特定の文字列で始まるクラス名を持つ要素を一致させるその他の方法

ワイルドカードを使用する

ワイルドカード * を使用すると、属性値が特定の文字列を含むすべての要素を一致させることができます。以下の例では、すべての .icon- または .user- で始まるクラス名を持つ要素に赤い色を設定します。

[class*="icon-"],
[class*="user-"] {
  color: red;
}

正規表現を使用する

CSS3 では、正規表現を使用して属性値を一致させることができます。以下の例では、すべての .icon-\d+ クラス名を持つ要素 (.icon-123 や .icon-456 など) に赤い色を設定します。

[class~=/\bicon-\d+\b/] {
  color: red;
}

それぞれの方法の比較

方法	説明	利点	欠点
前方一致セレクタ	属性値が特定の文字列で始まる要素を一致させる	シンプルでわかりやすい	パフォーマンスが遅くなる可能性がある
ワイルドカード	属性値が特定の文字列を含む要素を一致させる	前方一致セレクタよりも高速	誤った一致が発生する可能性がある
正規表現	属性値を正規表現で一致させる	柔軟性が高い	複雑でわかりにくい