【CSS】擬似要素と擬似クラス、どう違うの？？

2021/06/21

擬似要素とは

擬似要素とは、要素の特定の一部に対してスタイルを指定するものです。
要素の後に::を付けて指定します。

・::before
・::after
・::first-letter
・:: first-line　　など

::before / ::after
::beforeや::afterは、要素の前後にテキストや画像などのコンテンツを追加することができます。

::first-letter
::first-letterは要素のテキストの1文字目にスタイルを適用します。

:: first-line
:: first-lineは要素のテキストの1行目にスタイルを適用します。

擬似クラスとは、要素の特定の状態に対してスタイルを指定するものです。
要素の後に:を付けて指定します。

・:nth-child()
・:nth-of-type()
・:hover
・:link
・:active　　　　　　など

:nth-child(n) / :nth-of-type(n)
:nth-child(n)や:nth-of-type(n)はn番目の要素に対してスタイルを指定できます。

:hover
要素にマウスがホバーした状態のスタイルを指定します。