CSS属性セレクター - 属性による要素のマッチング

CSS属性セレクター

属性セレクターを使用すると、HTML属性の存在または値に基づいて要素をターゲットにできます。フォーム要素、リンク、データ属性を持つ要素のスタイリングに強力です。

セレクターの種類

セレクター	マッチ条件
[attr]	属性を持つ要素
[attr="val"]	属性値が完全に一致
[attr^="val"]	属性値が指定文字列で始まる
[attr$="val"]	属性値が指定文字列で終わる
[attr*="val"]	属性値に部分文字列を含む
[attr~="val"]	属性値の単語リストに含まれる
`[attr	="val"]`

実用的な例

外部リンクを異なるスタイルにする：

a[href^="https://"] {
  padding-right: 16px;
  background: url(external-icon.svg) right center no-repeat;
}

拡張子別にファイルダウンロードリンクをスタイリング：

a[href$=".pdf"] { color: red; }
a[href$=".zip"] { color: green; }
a[href$=".doc"] { color: blue; }

入力タイプ別のスタイリング：

input[type="email"],
input[type="url"] {
  font-family: monospace;
}

データ属性のターゲット：

[data-theme="dark"] {
  background: #1a1a2e;
  color: #eee;
}

大文字小文字の区別

デフォルトでは属性値のマッチングは大文字小文字を区別します。大文字小文字を無視するにはiフラグを追加します：

[type="text" i] { /* TEXT, Text, text にマッチ */ }

詳細度

すべての属性セレクターはクラスセレクターと同じ詳細度を持ちます：(0, 1, 0)。