CSS セレクター
CSSでは、セレクター (selector) を使って装飾したい HTML 要素を選択します。CSS セレクターは種類豊富なので、装飾したい要素を細かく選択できます。この記事では、さまざまな種類のセレクターについて、その機能を詳しく確認します。
前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本 (HTML 入門) および CSS に関するアイデア (CSS の第一歩) に関する基本的な知識を得ている。 |
---|---|
目的: | 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 つの個別のルールとして記述できますし、
css
h1 {
color: blue;
}
.special {
color: blue;
}
カンマ区切りでセレクターリストにもできます。
css
h1, .special {
color: blue;
}
カンマの前後にホワイトスペースを入れても大丈夫です。改行したほうが読みやすいかもしれません。
css
h1,
.special {
color: blue;
}
以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が変わらないはずです。
この方法でセレクターをまとめている場合、間違った文法で書かれたセレクターを 1 つでも含んでいるとルール全体が無視されます。
以下の例では無効なルールは無視され、h1
のみが装飾されます。
css
h1 {
color: blue;
}
..special {
color: blue;
}
ただし結合した場合は、ルール全体が無効とみなされ、h1
も装飾されません。
css
h1,
..special {
color: blue;
}
セレクターの種類
セレクターにはいくつかの異なるグループがあり、どれが必要かを知ることは有用です。この節ではさまざまなグループを詳しく見ていきます。
要素・クラス・ID によるセレクター
<h1>
のような HTML 要素を選択するセレクターがこのグループに属します。
css
h1 {
}
クラスを選択するセレクターも同様です。
css
.box {
}
あとは ID です。
css
#unique {
}
属性によるセレクター
特定の属性を持つ要素を選択するセレクターがこのグループに属します。
css
a[title] {
}
特定の属性を持ち、かつ、特定の属性値を持つ要素を選択するセレクターもあります。
css
a[href="https://example.com"]
{
}
擬似クラスおよび疑似要素によるセレクター
疑似クラス (pseudo-class) 、つまり特定の状態にある要素を選択するセレクターがこのグループに属します。たとえば、:hover
擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。
css
a:hover {
}
擬似要素 (pseudo-element) 、つまり要素自体ではなく要素の特定の部分を選択するセレクターもあります。たとえば、::first-line
は要素(以下の例では <p>
)内の最初の行をまるで <span>
でラップしてスタイルしたかのように動作します。
css
p::first-line {
}
結合子
最後のグループのセレクターは、セレクター同士を組み合わせて文書内のターゲット要素を選択します。たとえば、以下の例では子結合子(子コンビネーター、child combinator)(>
) によって <article>
要素の直接の子である段落を選択します。
css
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 |
一般兄弟 |