Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

概要

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階層以内を推奨します。

アクセシビリティ

  • セレクターの設計はアクセシビリティに直接影響しませんが、意味的なクラス名を使用することでコードの理解しやすさが向上します。