03｜その他の擬似クラスを覚えよう

擬似クラスとは？

擬似クラスとは通常のセレクタとは異なるclass名のことです。

例えば以下のようなコードがあった場合、最初のpをセレクタにするときはclass属性を利用して指定しますよね。

<div>
  <p>最初のテキスト</p>
  <p>2番目のテキスト</p>
</div>

class属性を利用した場合

最初のpだけ.firstというclass名をつけます。

<div>
  <p class="first">最初のテキスト</p>
  <p>2番目のテキスト</p>
</div>

.first{
  color: red;
}

擬似クラスを利用した場合

擬似クラスを利用することでその名の通り「擬似的なclass名」をセレクタにすることができます。

例えば「最初の兄弟要素（子要素）」をセレクタにしたい場合は以下の通りです。

<div>
  <p>最初のテキスト</p>
  <p>2番目のテキスト</p>
</div>

p:first-child{
  color: red;
}

擬似クラスは非常に多くの種類が存在しており、覚えておくとclass名の乱立を防ぐことができるためCSSの保守性を高めることができるようになります。

以下のチートシートで擬似クラスを数多く解説しているのでぜひ一読しておいてくださいね👍

動画解説と一緒にコードを書いていこう

課題用ファイルをダウンロード

今回は動画を見ながら一緒にファイルの修正をしていくので、以下のファイルをダウンロードしてください。

課題用ファイル（03_pseudo_Q.zip）

今回の動画では以下の擬似クラスを学習していきます。

• :first-child（兄弟要素の最初の子要素）
• :not()（〇〇以外）
• :nth-child()（要素番号・奇数偶数の指定）