CSS セレクター

CSS セレクターは、CSS ルール (CSS Rule) の最初の部分です。CSS セレクターは要素やその他の用語の組み合わせで、どの HTML 要素を選択するかブラウザーに伝えます。選択された要素には CSS プロパティ値 (property value) が適用されます。セレクターによって選択された要素を、選択対象 (subject of the selector) と呼びます。

他の記事を読むと、対象の選択方法がセレクターによって異なることに気づくかもしれません。例えば、h1 は HTML 要素で選択する一方 .special はクラスで選択します。

セレクターは CSS セレクター仕様で定義されます。ほとんどのセレクターは Level 3 Selectors specification や Level 4 Selectors specification で定義されています。CSS の他の部分と同様に、セレクターが機能するにはブラウザーのサポートが必要ですが、どちらも成熟した仕様なのでブラウザーのサポートも充実しています。

同じ CSS を使用する場合は、それぞれのセレクターを セレクターリスト (selector list) にまとめてルールを適用できます。たとえば、h1 と .special の CSS が同じ場合、2 つの個別のルールとして記述できますし、

h1 {
  color: blue;
}

.special {
  color: blue;
}

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

h1, .special {
  color: blue;
}

カンマの前後にホワイトスペースを入れても大丈夫です。改行したほうが読みやすいかもしれません。

h1,
.special {
  color: blue;
}

以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が変わらないはずです。

この方法でセレクターをまとめている場合、間違った文法で書かれたセレクターを 1 つでも含んでいるとルール全体が無視されます。

以下の例では無効なルールは無視され、h1 のみが装飾されます。

h1 {
  color: blue;
}

..special {
  color: blue;
}

ただし結合した場合は、ルール全体が無効とみなされ、h1 も装飾されません。

h1,
..special {
  color: blue;
}

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

<h1> のような HTML 要素を選択するセレクターがこのグループに属します。

h1 {
}

クラスを選択するセレクターも同様です。

.box {
}

あとは ID です。

#unique {
}

特定の属性を持つ要素を選択するセレクターがこのグループに属します。

a[title] {
}

特定の属性を持ち、かつ、特定の属性値を持つ要素を選択するセレクターもあります。

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

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

a:hover {
}

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

p::first-line {
}

最後のグループのセレクターは、セレクター同士を組み合わせて文書内のターゲット要素を選択します。たとえば、以下の例では子結合子（子コンビネーター、child combinator）(>) によって <article> 要素の直接の子である段落を選択します。

article > p {
}

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

• 前のページ
• Overview: Building blocks
• 次のページ

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