Selectors (core)
CSSセレクターは、スタイルを適用する要素を特定するための基本的な構文です。要素型セレクター、クラスセレクター、IDセレクター、属性セレクター、結合子(子孫、子、隣接兄弟、一般兄弟)など、CSSの最も古くから存在するセレクター群を含みます。すべてのCSSスタイルシートの基礎であり、効率的なセレクター設計はパフォーマンスとメンテナンス性に直結します。
概要
CSSセレクターは、スタイルを適用する要素を特定するための基本的な構文です。要素型セレクター、クラスセレクター、IDセレクター、属性セレクター、結合子(子孫、子、隣接兄弟、一般兄弟)など、CSSの最も古くから存在するセレクター群を含みます。すべてのCSSスタイルシートの基礎であり、効率的なセレクター設計はパフォーマンスとメンテナンス性に直結します。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 3+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
h1 { color: navy; }
.card > .title { font-weight: bold; }
#main p { line-height: 1.6; }
a[href^="https"] { color: green; } 実務での使いどころ
-
スタイル適用対象の指定
HTML要素に対して、タイプ、クラス、ID、属性、構造的な関係に基づいてスタイルを効率的に適用します。
注意点
- 過度にネストしたセレクター(例:.a .b .c .d .e)はパフォーマンスとメンテナンス性を低下させるため、3階層以内を推奨します。
アクセシビリティ
- セレクターの設計はアクセシビリティに直接影響しませんが、意味的なクラス名を使用することでコードの理解しやすさが向上します。