CSS セレクター
=========

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

CSSでは、セレクター (selector) を使って装飾したい HTML 要素を選択します。CSS セレクターは種類豊富なので、装飾したい要素を細かく選択できます。この記事では、さまざまな種類のセレクターについて、その機能を詳しく確認します。

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

セレクターとは
-------

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

![Some code with the h1 highlighted.](/ja/docs/Learn/CSS/Building_blocks/Selectors/selector.png)

他の記事を読むと、対象の選択方法がセレクターによって異なることに気づくかもしれません。例えば、`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 によるセレクターから見ていくこともできます。

* 前のページ
* Overview: 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` | 一般兄弟 |