CSSセレクタの書き方をコード実例付きで解説！【複数指定や子要素の指定も】

HTMLにデザインを適用させるには、CSSのセレクタを使うことが必要不可欠です。
この記事では、セレクタとは何か、そしてどのようにしてHTMLにスタイルを適用するのかを分かりやすく解説します！

セレクタとはHTML要素にスタイルを適用するときに「どのHTML要素に適用するか」を指し示すものです。

まずはざっくりと全体のルールとしてのセレクタの書き方を見ていきましょう。

下の図を見ると分かりますが、基本的にCSSはセレクタ、プロパティ、値の3つで構成されます。セレクタで指定し、{}で囲った中にプロパティと値を記述することで、指定したHTML要素にスタイルを適用させます。例えばこの例だとpタグに対し、フォントカラーを赤にする、という記述になります。

以下のように指定方法を使い分けることで特定のHTML要素にだけスタイルが効くように調整することができます。【よく使う基本編】として、基本的にはこれらをつかってスタイルを適用させていくセレクタをまとめました。

タグセレクタは、HTMLタグ（例: h1, p）を直接指定してスタイルを適用します。これは最も基本的なセレクタで、特定のタグのすべてのHTML要素に一括でスタイルを適用できます。

p {
    color: red;
}

See the Pen selector1 by web design shake (@webdesignshake) on CodePen.

クラスセレクタは、HTMLのclass属性に基づいて要素を選択します。複数の要素に同じスタイルを適用したい場合に便利です。例えば、.buttonというクラスセレクタは、class="button"を持つすべての要素に適用されます。

.button {
    color: red;
}

See the Pen Untitled by web design shake (@webdesignshake) on CodePen.

IDセレクタは、id属性を持つ単一のHTML要素を指定します。例えば、#headerというIDセレクタは、id="header"を持つ要素にのみスタイルを適用します。

#header {
    color: red;
}

See the Pen selector3 by web design shake (@webdesignshake) on CodePen.

子孫セレクタは、特定のHTML要素の子孫要素をターゲットにします。例えば、ul liはul要素の中のすべてのli要素にスタイルを適用します。

ul li {
    color: red;
}

See the Pen Untitled by web design shake (@webdesignshake) on CodePen.

複合セレクタは、複数の条件を組み合わせて要素を選択します。例えば、div.buttonのように空白を空けずに続けて記述すると、divタグでかつclass="button"の要素を指します。

div.button {
    color: red;
}

See the Pen selector5 by web design shake (@webdesignshake) on CodePen.

複数セレクタは、複数のセレクタに対し同一のスタイルを与えることができます。,で区切ることによって要素を複数指定します。以下の例ではpタグ要素、class="button"を持つ要素、id="header"を持つ要素を指定します。

p, .button, #header {
    color: red;
}

See the Pen selector6 by web design shake (@webdesignshake) on CodePen.

隣接兄弟セレクタは、+記号を使用して表され、特定の要素の直後に来る兄弟要素にスタイルを適用します。この例では、h2要素の直後に来るp要素（つまり隣接する兄弟）のテキスト色が赤になります。

h2 + p {
    color: red;
}

See the Pen selector7 by web design shake (@webdesignshake) on CodePen.

後続兄弟セレクタは~記号を使用して表され、特定の要素の後に来るすべての兄弟要素にスタイルを適用します。この例では、h2要素の後に来るすべてのp要素のテキスト色が赤になります。

h2 ~ p {
    color: red;
}

See the Pen selector8 by web design shake (@webdesignshake) on CodePen.

子セレクタは、直接の子要素にのみスタイルを適用します。div > pはdiv要素の直下にあるp要素に限定してスタイルを適用します。

div > p {
    color: red;
}

See the Pen selector9 by web design shake (@webdesignshake) on CodePen.

全称セレクタは、すべての要素に対してスタイルを適用するために使用されるセレクタです。全称セレクタはアスタリスク（*）で表され、ページ上のすべての要素を対象とします。
全称セレクタの利点は、一括してスタイルルールを適用できることにあります。これは、ブラウザ間でのスタイリングの一貫性を確保したり、デフォルトスタイルをリセットするためによく使用されます。

* {
    color: red;
}

See the Pen selector10 by web design shake (@webdesignshake) on CodePen.

疑似クラスセレクタとはCSSで使用される特殊なセレクタの一種で、HTML要素の特定の状態にスタイルを適用するために使われます。これにより、要素が特定の条件や状態にある時にのみスタイルを適用することができます。疑似クラスは、通常のクラスとは異なり、HTML内でクラスを追加するのではなく、CSS内で記述することで指定します。

以下のようにセレクタの後で:を記述し、そのあとに続けて疑似クラス名を記述することで特定の条件下でのみスタイルが適用されます。

疑似クラスにどんなものがあるか見ていきましょう。

nth-child(n)セレクタは、特定の順番の子要素をターゲットにします。例えば、ul li:nth-child(2)はulの2番目のli要素にスタイルを適用します。

ul li:nth-child(2) {
    color: red;
}

See the Pen Untitled by web design shake (@webdesignshake) on CodePen.

また、:nth-child セレクタはより複雑なパターンを指定することもできます。以下にいくつかの例を示します。

奇数や偶数で要素を指定します。
例えば、:nth-child(odd)では、奇数番目の子要素すべてを選択します。

ul li:nth-child(odd) {
    color: red;
}

See the Pen selector12 by web design shake (@webdesignshake) on CodePen.

:nth-child(even)では、偶数番目の子要素すべてを選択します。

ul li:nth-child(even) {
    color: red;
}

See the Pen Untitled by web design shake (@webdesignshake) on CodePen.

倍数を使って特定の間隔で要素を指定します。
例えば、:nth-child(3n)では、3の倍数番目の要素を選択します（例: 3番目、6番目、9番目…）。

ul li:nth-child(3n) {
    color: red;
}

See the Pen selector14 by web design shake (@webdesignshake) on CodePen.

:nth-child(4n+1)では、4の倍数に1を加えた位置の要素を選択します（例: 1番目、5番目、9番目…）。

ul li:nth-child(4n+1) {
    color: red;
}

See the Pen Untitled by web design shake (@webdesignshake) on CodePen.

範囲で要素を指定します。
例えば、:nth-child(-n+3)では、最初の3つの子要素を選択します。

ul li:nth-child(-n+3) {
    color: red;
}

See the Pen Untitled by web design shake (@webdesignshake) on CodePen.

動的セレクタは、ユーザーのアクション（例: マウスオーバー、クリック）に反応してスタイルを適用します。:hoverや:activeを使うことで、Webサイトのインタラクションをリッチにできます。いくつかの例を挙げます。

このセレクタは、ユーザーがマウスポインタを要素の上に置いたときにスタイルを適用します。リンクやボタンに多く使われます。例えば以下の例ではマウスオーバー時にフォントカラーが赤くなります。

a:hover {
   color: red;
}

See the Pen selector17 by web design shake (@webdesignshake) on CodePen.

ユーザーが要素をクリックしている間、つまり要素がアクティブな状態の時にスタイルを適用します。以下の例ではボタン要素をクリックしている間、フォントカラーが赤くなります。

button:active {
    color: red;
} 

See the Pen selector18 by web design shake (@webdesignshake) on CodePen.

要素がフォーカスされている（例えば、テキストフィールドにキーボードフォーカスがある時）時にスタイルを適用します。アクセシビリティを高めるために重要なセレクタです。

input:focus {
    outline: 0;
    border-color: red;
} 

See the Pen selector19 by web design shake (@webdesignshake) on CodePen.

チェックボックスやラジオボタンなどの入力要素がチェックされている場合に適用されます。例えば以下の例では、チェックボックスがチェックされている時、背景色を赤色に変えます。

input[type="checkbox"]:checked {
    accent-color: red;
}

See the Pen selector20 by web design shake (@webdesignshake) on CodePen.

:notセレクタは、特定の条件を除外して要素を選択します。例えば、p:not(.is-active)はpタグの中でis-activeクラスを持たない要素のフォントカラーを赤にします。

p:not(.is-active) {
    color: red;
}

See the Pen selector21 by web design shake (@webdesignshake) on CodePen.

属性セレクタは、特定の属性を持つ要素にスタイルを適用します。以下の例ではタイプがテキストのすべてのinput要素に適用されます。テキストを入力すると赤色で表示されます。

input[type="text"] {
    color: red;
}

See the Pen selector22 by web design shake (@webdesignshake) on CodePen.

いかがでしょうか？
CSSのセレクタについて基本的なセレクタから始まり、より高度な疑似クラスを用いたセレクタまで解説しました。初心者にも理解しやすいように、各セレクタの種類とその使用方法、具体的な例を通じて説明してきました。
最初は【よく使う基本編】のセレクタを使って、セレクタに慣れるのが良いと思います。その後、例えばボタンをホバーしたときにスタイルを適用させたい、などしたいことに応じて少しずつ疑似クラスにも手を出していくと良いでしょう。