CSS セレクター

CSSでは、ウェブページ上の HTML 要素にスタイルを設定するためにセレクターが使用されます。CSS セレクターにはさまざまな種類があり、きめ細かにスタイルを設定する要素を選択できます。この記事とそのサブ記事では、さまざまなタイプについて、どのように機能するかを詳しく見ていきます。

前提条件: 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本 (HTML 入門) および CSS に関するアイデア (CSS の第一歩) に関する基本的な知識を得ている。
目的: CSS セレクターがどのように機能するかを学ぶ。

セレクターとは

実はもうこれまでにセレクターを見たことがあるはずです。CSS セレクターは、CSS のもっとも基本的なルールとなるものです。要素やその他を選択して CSS プロパティ値を適用する HTML 要素をブラウザーに伝えるものです。セレクターによって選択される要素は、選択対象 (subject of the selector) と呼ばれます。

Some code with the h1 highlighted.

これまでの記事で h1 要素や .special クラスなどのいくつかのセレクターを見てきました。それらはドキュメント内の対象をさまざまな方法で指定できるということも学びました。

"CSS セレクター仕様" (CSS Selectors specification) で、CSS のセレクターは定義されています。 CSS の他の部分と同様に、それらが機能するにはブラウザーでのサポートが必要です。よく使うセレクターは確定仕様である Level 3 Selectors specification で定義されているため、ブラウザーサポートも期待できます。

セレクター一覧

同じ CSS を使用するものが複数ある場合は、セレクターリストでまとめてルールを適用することができます。たとえば、h1.special クラスが同じ CSS だとして、 2 つの個別のルールとして記述できます。

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

カンマ区切りでセレクターリストにもできます。

h1, .special { 
  color: blue; 
} 

カンマの前後に空白を入れることもできますし、改行したほうがセレクターを見つけやすくなり読みやすいかもしれません。

h1, 
.special { 
  color: blue; 
} 

以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が同じになるように留意してください。

 

この方法でセレクターをグループ化していると、無効なセレクターがある場合はルール全体が無視されます。

以下の例では無効なセレクターは無視され、h1 だけがスタイル適用されます。

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 


ただし結合した場合は、h1 もクラスも無効なものとしてスタイルされません。

h1, ..special { 
  color: blue; 
} 

セレクターの種類

セレクターにはいくつかの異なるグループがあり、どれが必要かを知ることは有用です。ここのサブ記事ではさまざまなセレクターグループを詳しく見ていきます。

要素・クラス・ID によるセレクター

このグループには <h1> のような HTML 要素を対象とするセレクターを含みます。

h1 { }

同様にクラスを対象としたセレクターも含みます。

.box { }

あとは ID です。

#unique { }

属性によるセレクター

このセレクターグループは要素の属性によるさまざまな選択方法を提供します。

a[title] { }

特定の値を持つ属性で選択することもできます。

a[href="https://example.com"] { }

擬似クラスおよび疑似要素によるセレクター

このセレクターグループは、要素の特定の状態をスタイルする疑似クラスを含みます。たとえば、:hover 擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。

a:hover { }

また要素自体ではなく要素の特定の部分を選択する擬似要素もあります。たとえば、::first-line は要素 (以下では <p>) 内の最初の行をまるで <span> でラップしてスタイルしたかのように動作します。

p::first-line { }

結合子

最後のセレクターグループは、セレクターを組み合わせて要素を選びます。たとえば、以下では子コンビネータ (>) によって <article> 要素の直接の子である段落を選択します。

article > p { }

次のステップ

この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、要素・クラス・ID によるセレクター から見ていくこともできます。

セレクターのリファレンス表

以下の表で使用可能な各セレクターの概要とそれぞれのガイドを紹介します。そこには各セレクターのブラウザーサポートを確認できる MDN ページへのリンクもあります。セレクターを検索したり CSS 実験するために参照することができます。

セレクター CSS チュートリアル
要素セレクター h1 {  } 要素セレクター
全称セレクター * {  } 全称セレクター
クラスセレクター .box {  } クラスセレクター
IDセレクター #unique { } ID セレクター
属性セレクター a[title] {  } 属性によるセレクター
擬似クラスセレクター p:first-child { } 疑似クラス
疑似要素セレクター p::first-line { } 疑似要素
子孫結合子 article p 子孫結合子
子結合子 article > p 子結合子
隣接兄弟結合子 h1 + p 隣接兄弟
一般兄弟結合子 h1 ~ p 一般兄弟

このモジュール

  1. カスケードと継承
  2. CSS セレクター
  3. ボックスモデル
  4. 背景と枠線
  5. テキスト方向の操作
  6. 要素のはみ出し (オーバーフロー)
  7. CSS の値と単位
  8. CSS によるサイズ設定
  9. 画像・メディア・フォーム要素
  10. 表のスタイリング
  11. CSS のデバッグ
  12. CSS の整理