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の保守性を高めることができるようになります。

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

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

パスワードが必要です

これより先は有料コンテンツです。「ギャクサン」の購入ページから契約をしてください。
すでに契約済みの方でパスワードの入力が上手くいかない場合はサポートへ連絡してください。

送信する