CSS属性セレクター ([attr]) — 要素属性による選択
すべてのCSS属性セレクターのバリエーションを学びます：[attr]、[attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr*=value]の実践的な例付き。
Attribute Selectors
詳細な説明
CSS属性セレクター
属性セレクターは、HTML属性の存在や値に基づいて要素をターゲットします。非常に多機能で、7つのバリエーションがあります。
すべてのバリエーション
| セレクター | マッチ条件 |
|---|---|
[attr] |
属性を持つ（任意の値） |
[attr="value"] |
完全一致 |
[attr~="value"] |
単語を含む（スペース区切りリスト） |
| `[attr | ="value"]` |
[attr^="value"] |
値で始まる |
[attr$="value"] |
値で終わる |
[attr*="value"] |
値を含む |
詳細度
すべての属性セレクターは**(0, 1, 0)**の詳細度を持ちます — クラスセレクターと同じです。
一般的なパターン
/* 必須フォームフィールドのスタイル */
input[required] { border-left: 3px solid red; }
/* 外部リンクにアイコンを追加 */
a[target="_blank"]::after { content: " ↗"; }
ユースケース
属性セレクターは、タイプ別のフォーム要素のスタイリング（input[type='email']）、JavaScriptフレームワークでのデータ属性のターゲット（[data-state='active']）、外部リンクの異なるスタイリング（a[href^='https']）、ダウンロードリンクのファイルタイプ表示（a[href$='.pdf']）、lang属性に基づく国際化スタイルの実装に不可欠です。