{{Glossary("CSS")}}では、ウェブページ上の {{glossary("HTML")}} 要素にスタイルを設定するためにセレクターが使用されます。CSS セレクターにはさまざまな種類があり、きめ細かにスタイルを設定する要素を選択できます。この記事とそのサブ記事では、さまざまなタイプについて、どのように機能するかを詳しく見ていきます。
| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本 (HTML 入門) および CSS に関するアイデア (CSS の第一歩) に関する基本的な知識を得ている。 |
|---|---|
| 目的: | CSS セレクターがどのように機能するかを学ぶ。 |
実はもうこれまでにセレクターを見たことがあるはずです。CSS セレクターは、CSS のもっとも基本的なルールとなるものです。要素やその他を選択して CSS プロパティ値を適用する HTML 要素をブラウザーに伝えるものです。セレクターによって選択される要素は、選択対象 (subject of the selector) と呼ばれます。
これまでの記事で 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 つのセレクターを結合してみてください。作業の前後で見た目が同じになるように留意してください。
{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}
この方法でセレクターをグループ化していると、無効なセレクターがある場合はルール全体が無視されます。
以下の例では無効なセレクターは無視され、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"] { }
このセレクターグループは、要素の特定の状態をスタイルする疑似クラスを含みます。たとえば、:hover 擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。
a:hover { }
また要素自体ではなく要素の特定の部分を選択する擬似要素もあります。たとえば、::first-line は要素 (以下では <p>) 内の最初の行をまるで <span> でラップしてスタイルしたかのように動作します。
p::first-line { }
最後のセレクターグループは、セレクターを組み合わせて文書内のターゲット要素を選びます。たとえば、以下では子コンビネータ (>) によって <article> 要素の直接の子である段落を選択します。
article > p { }
この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、要素・クラス・ID によるセレクターから見ていくこともできます。
{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
以下の表で使用可能な各セレクターの概要と、それぞれの使い方を示すガイド内ページへのリンクを紹介します。そこには各セレクターのブラウザーサポートを確認できる MDN ページへのリンクもあります。セレクターを検索したり一般的に CSS を体験するときに、ここに戻ってきて参照することができます。
| セレクター | 例 | CSS チュートリアル |
|---|---|---|
| 要素セレクター | h1 { } |
要素セレクター |
| 全称セレクター | * { } |
全称セレクター |
| クラスセレクター | .box { } |
クラスセレクター |
| ID セレクター | #unique { } |
ID セレクター |
| 属性セレクター | a[title] { } |
属性によるセレクター |
| 擬似クラスセレクター | p:first-child { } |
疑似クラス |
| 疑似要素セレクター | p::first-line { } |
疑似要素 |
| 子孫結合子 | article p |
子孫結合子 |
| 子結合子 | article > p |
子結合子 |
| 隣接兄弟結合子 | h1 + p |
隣接兄弟 |
| 一般兄弟結合子 | h1 ~ p |
一般兄弟 |