CSSのセレクタは「スタイルをどこの要素に対して適用するか」を指定するものです。

セレクタがうまく使いこなせないと、思った要素にスタイルを適用できなかったり予想外のところが変更されてしまったりすることがあります。どの要素にスタイルを適用するかを適切にコントロールし、効率よく記述するためにセレクタの使い方をしっかりと理解しておくことが大切です。

セレクタにはさまざまな種類があり、指定方法も複雑なものもあります。まずは知っておくべき基本的なセレクタについて解説していきます。

要素セレクタ（要素名で指定）

要素セレクタはその名のとおりHTMLの要素の名前をセレクタにします。
例えば、<p>タグでマークアップしたところにスタイルを適用したいときにはセレクタを要素名の「p」とします。要素セレクタを使った場合、ページ内の指定した全ての要素にスタイルが適用されます。

次の例では、要素セレクタを使ってp要素のみ文字色を変更しています。

p {
    font-size: 16px;
}

IDセレクタ（id名で指定）

IDセレクタはid属性によって要素につけられた任意の名前（id名）を使ってスタイルを適用するためのセレクタです。#（ハッシュ）＋id名で指定できます。

<p id="id_name">id属性でid名を指定</p>

id属性は要素に対して固有の名前（唯一の名前）を付けるための属性です。id名はその文書（ページ）内では一つしか存在しない名前でなければなりません。他の要素に同じ名前を付けないように注意しましょう。

次の例では、IDセレクタを使って文字色を変更しています。id属性によってid名「color-red」がつけられている要素に含まれる要素のすべての文字色が変更されています。

<p id="color-red">CSSのセレクタについて学習しましょう</p>
<p>タイルを適用したい要素を指定するセレクタにはさまざまな種類があります</p>

#color-red {
    color: red;
}

クラスセレクタ（クラス名で指定）

クラスセレクタはclass属性によって要素につけられた任意の名前（クラス名）を使ってスタイルを適用するためのセレクタです。.（ドット）＋クラス名で指定できます。

<p class="class_name">class属性でクラス名を指定</p>

次の例では、クラスセレクタを使って文字色を変更しています。class属性によってクラス名「color-blue」がつけられている要素に含まれる要素のすべての文字色が変更されています。

<p>CSSのセレクタについて学習しましょう</p>
<p class="color-blue">タイルを適用したい要素を指定するセレクタにはさまざまな種類があります</p>

.color-blue {
    color: blue;
}

id属性とclass属性は、ともに要素に固有の名前を付けるための属性なのですが、id属性の値はHTML文書全体で一意（ひとつのみ）でなければならない、というルールがあります。つまりひとつのid名はその文書（ページ）内では一度しか使えません。それに対してclass属性の値クラス名は同じページで何度でも使うことができます。

class属性に複数の名前を指定してセレクタに利用する

クラス名は同じページでも何度も使うことができるだけでなく、class属性にはいくつでも値を設定できます。これは一つの要素に複数のクラス名を設定できるということです。

<p class="color-blue">文字の色を青色に</p>
<p class="font-24">文字の大きさを24ピクセルに</p>
<p class="color-blue font-24">両方のスタイルが適用されます</p>

.color-blue {
    color: blue;
}
.font-24 {
    font-size: 24px;
}

セレクタを接続する

セレクタをスペースを空けずに接続して記述すると条件の絞り込みのように使うことができます。

次のように、p要素とdiv要素に同じクラス名を指定されているとき、要素名とクラス名を接続して「p.color-blue」をセレクタにすることで、「p要素」かつ「クラス名color-blueの要素」という条件を満たす要素にのみ適用させることができます。

<p class="color-blue">p要素の中身に適用されます</p>
<div class="color-blue">div要素の中身には適用されません</div>

p.color-blue {
    color: blue;
}

class属性には半角スペースで区切ることで複数のクラス名を指定することができます。複数のクラス名を持たせることで別のセレクタとして設定されたスタイルをすべて適用させることができます。次の例では、クラス名color-blueとfont-24の両方を持つ要素にはどちらのスタイルも適用されます。
2つのクラス名を持っている場合の時にだけ、というような条件としても使うことができます。

<p class="color-blue">文字の色を青色に</p>
<p class="font-24">文字の大きさを24ピクセルに</p>
<p class="color-blue font-24">両方のスタイルと組み合わせたときのみのスタイルが適用されます</p>

.color-blue {
    color: blue;
}
.font-24 {
    font-size: 24px;
}
.color-blue.font-24 {/* 両方のクラスを持つときのみ */
    font-weight: bold;
}

子孫セレクタ（ある要素内の特定の子孫要素を指定）

セレクタを半角スペースで区切って並べることで、指定の親要素の中の特定の子要素または孫要素に対してCSSを適用させることができます。このように親子関係による絞り込み指定を使ったものを子孫セレクタと言います。親要素から見て、直下の子要素、孫要素、ひ孫要素など、深い階層にある要素までをすべて対象とします。

次の例は、p要素の子要素であるem要素にのみ、スタイルが適用されます。

<p>子孫セレクタは、<em>ある親要素の子要素または孫要素だけ</em>を対象にするセレクタです。</p>

p em {
    color: blue;
}

複数のセレクタ（カンマ区切りで複数のセレクタ を指定）

複数のセレクタ（要素、class、IDなど）に対して同じスタイルを一度に適用させたい場合、セレクタを「,（カンマ）」で区切って記述することで指定することができます。

次の例では、h1要素とh2要素にのみ、スタイルが適用されます。

<h1>CSSの基礎</h1>
<p>CSSについて学習しましょう。</p>

h1, p {
    color: blue;
}

子セレクタ（指定要素のすぐ下の子要素のみを対象）

子セレクタは、「親要素 > 子要素」のように「>（山括弧）」で接続する形式で指定することで、指定した親要素内の直下の子要素にのみスタイルを適用することができます。直下の子要素とはその要素から見て「入れ子構造のすぐ一つ下の階層にある要素」を指します。

次の例では、すぐ下の子要素のp要素にのみスタイルは適用され、孫要素のp要素には適用されません。

<div class="content">
  <p>すぐ下の階層の子要素であるこの要素に適用されます。</p>
  <div>
    <p>この要素は孫要素になるので適用されません。</p>
  </div>
</div>

.content > p {
    color: blue;
}

隣接セレクタ（指定要素の直後に位置している要素のみを対象）

隣接セレクタは、指定要素の直後に隣接している要素にスタイルを適用する方法です。同じ親要素を持つ兄弟要素を、「兄弟要素Aセレクタ + 兄弟要素Bセレクタ」のように「+（半角プラス）」で接続する形式でセレクタを指定することで、兄弟要素Aのすぐ次に位置する兄弟要素Bにスタイルが適用することができます。前隣（直前）ではなく後隣（直後）の要素だという点に注意しましょう。

次の例では、h2要素のすぐ後ろのp要素にのみスタイルが適用されます。

<div class="content">
  <h2>隣接セレクタ</h2>
  <p>後隣のこの要素に適用されます。</p>
  <div>
    <p>この要素は後隣ではないので適用されません。</p>
  </div>
  <p>この要素も後隣ではないので適用されません。</p>
</div>

h2 + p {
    color: blue;
}

間接セレクタ（要素の後ろにある同じ階層の兄弟要素を指定）

間接セレクタ（兄弟セレクタとも呼ばれます）は、同じ親要素を持つ兄弟関係で、「要素A ~ 要素B」のように「~（チルダ）」で接続する形式でセレクタを指定することで、要素Aと同階層でそれより後にある要素Bにスタイルを適用することができます。隣接セレクタと異なり、間に別の要素が入っても適用されます。

次の例では、h2要素のすぐ後ろのp要素とdiv要素の後のp要素にスタイルが適用されます。div要素内のp要素は階層が異なるのでスタイルは適用されません。

<div class="content">
  <h2>兄弟セレクタ</h2>
  <p>この要素は同じ階層で後ろにあるので適用されます。</p>
  <div>
    <p>この要素は同じ階層ではないので適用されません。</p>
  </div>
  <p>この要素は同じ階層で後ろにあるので適用されます。</p>
</div>

h2 ~ p {
    color: blue;
}