こんにちは。今回はCSSのセレクタについてのお話となります。
CSSはHTMLの要素にスタイルを適用する際に「セレクタ」と呼ばれる仕組みを使い、どこに命令を出すか指定します。
最近ではセレクタをクラスで指定することが増えてきていますが、セレクタの種類は意外と多く、使いこなすことで効率的にスタイルを管理できます。

この記事ではCSSの学習を初めたばかりの方でも理解しやすいよう、基本から便利なセレクタまで記述方法法と適用例を交えながら分かりやすく解説していきます！

基本セレクタ

まずは最もよく使う基本的なセレクタから。

要素セレクタ

指定したHTMLタグすべてにスタイルを適用するセレクタです。

記述方法ほう:

要素名 {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

すべてのp要素の文字色が青色になります。

ユニバーサルセレクタ

すべての要素にスタイルを適用するセレクタです。

記述方法法:

* {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

すべての要素の文字サイズが16px、フォントの太さが標準になります。

クラスセレクタ

要素に付けたクラス属性を指定してスタイルを適用します。

記述方法法:

.クラス名 {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

class="box"が指定された要素だけにスタイルが適用されます。

IDセレクタ

要素に付けたID属性を指定してスタイルを適用します。

記述方法:

#ID名 {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

id="header"が指定された要素だけにスタイルが適用されます。

ポイント: IDセレクタは一意であるべきなので、1つのページで同じIDを複数使わないようにしましょう。

階層セレクタ

HTMLの親子関係や兄弟要素の関係を利用して要素を指定するセレクタです。

子セレクタ（ > ）

直接の子要素にだけスタイルを適用します。

記述方法:

親要素 > 子要素 {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

divの直下にあるp要素だけが対象です。

子孫セレクタ（空白）

特定の親要素内にある子要素・孫要素などにスタイルを適用します。

記述方法:

親要素 子要素 {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

ul要素内のliのみ赤色になります。

隣接兄弟セレクタ（ + ）

指定した要素に隣接する直後の兄弟要素にスタイルを適用します。

記述方法:

要素 + 兄弟要素 {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

h1に隣接した直後のpのみ緑色になります。

一般兄弟セレクタ（ ~ ）

指定した要素以降の兄弟要素すべてにスタイルを適用します。

記述方法:

要素 ~ 兄弟要素 {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

h1以降に出現するpのみ緑色になります。

属性セレクタ

特定の属性や属性値を持つ要素を指定します。

基本の属性セレクタ（[attr]）

特定の属性を持つ要素にスタイルを適用します。

記述方法:

[属性名] {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

target属性があるリンクだけが緑色になります。

属性値指定セレクタ（[attr=”value”]）

属性値が特定の値の場合にスタイルを適用します。

記述方法:

[属性名="属性値"] {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

href属性の値がhttps://nnc-studio.jpであるリンクだけが赤色になります。

部分一致セレクタ

前方一致（[attr^=”value”]）: 属性値が特定の文字で始まる要素を指定します。

後方一致（[attr$=”value”]）: 属性値が特定の文字で終わる要素を指定します。

記述方法:

[属性名^="属性値"] {
    プロパティ: 値;
}

[属性名$="属性値"] {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

href属性の値がhttpsから始まるリンクは青色に、href属性の値が.pdfで終わるリンクは赤色になります。

疑似クラスと疑似要素

状態や位置に応じてスタイルを変更するセレクタです。

マウスホバー時のスタイル（:hover）

記述方法:

要素:hover{
  プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

要素がフォーカスされたとき（:focus:）

記述方法:

要素:focus {
  プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

内容が空の要素（:empty）

記述方法:

要素:empty {
  プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

チェックボックスやラジオボタンが選択されている要素（:checked）

記述方法:

要素:checked {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

要素の順番を指定（:nth-child(n)）

親要素内にある全ての子要素を数える方法で、順番を指定できます。

記述方法:

要素:nth-child(n) {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

5番目に登場するdtだけが緑色になります。

要素の順番を指定（:nth-of-type(n)）

指定した要素のみを数える方法で、順番を指定できます。

記述方法:

要素:nth-of-type(n) {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

2番目の段落だけがターコイズになります。

nth-childとnth-of-typeの違い:

• :nth-child(n)は親要素の中で全ての子要素の順番を基準に適用されます。
• :nth-of-type(n)は同じタグ名の子要素の順番だけに適用されます。

:first-child / :last-child

記述方法:

要素:first-child {
    プロパティ: 値;
}

要素:last-child {
    プロパティ: 値;
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

要素の前後にコンテンツを追加（::before / ::after:）

記述方法:

要素::before {
  プロパティ: "値";
}

要素::after {
  プロパティ: "値";
}

適用例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

まとめ

いかがでしたか？
CSSセレクタを使いこなせば、HTMLの構造を柔軟にコントロールしてスタイルを適用できます。
初学者の方はまず基本セレクタからマスターし、徐々に便利なセレクタにチャレンジしてみましょう！

さらに学びたい方は、MDN Web Docsなどの公式リソースを是非参考にしてみてください。
この記事で紹介したセレクタを活用して、効率的なCSSコーディングを目指してください！