擬似クラスと擬似要素まとめ

擬似クラスと擬似要素についてまとめました。

名前は似ていますが使用方法は似ていません。

擬似クラス

擬似クラスは、特定の要素に対して、ある状態の場合にcssを適用させることができます。

よく使用する擬似クラスを含めて使い方をまとめていきます。

:hover

カーソルを乗せた状態の時に適用させることができます。

a:hover リンクにカーソルが乗っている時の状態を変化させます。

:active

要素がクリックされている時に適用させることができます。

a:active リンクがクリックされている時の状態を変化させます。

:first-child, :last-child

最初や最後の要素にだけ適用させることができます。

li:first-child リストの中の最初の要素
li:last-child リストの中の最後の要素

:nth-child, :nth-of-type

この2つは使い方が似ているため少しわかりづらいです。

どちらも同じように、要素の中の「何番目」という要素を指定して状態を変化させることができます。

:nth-child(3) 上から3番目の要素
:nth-child(3n) 3の倍数の要素
:nth-of-type(3) 指定した要素のみで、上から3番目の要素

どちらも上から数える点は同じですが、数える対象がそれぞれ異なるため

種類の異なる要素が混ざっている場合は注意が必要です。

擬似要素

擬似要素は、特定の要素に対してスタイルを適用させることができます。

「before」と「after」の二つについてまとめていきます。

::before と ::after

要素の「前」か「後」の違いはありますが、使い方は基本同じです。

contentが必須

beforeやafterを使用する際は必ずcontentが必要になります。

::before { content: ” ・”; }　要素の前に「・」を追加
::after { content: ” img/img.jpg”; }　要素の後に画像を追加

線や図形を追加することも可能

線や図形、矢印などを追加するときは、contentのサイズや位置を指定する必要があります。

::after { content: ” “;　空白のcontentを追加
width: 10px; height: 2px;　長さ10px、太さ2pxを指定
background-color: “#000”;　色は#000
position: abolute;　　relativeの親要素を基準に
top; 20px left; 10px }　上から20px、左から10pxの位置を指定
transform: rotate(45deg)　角度を45度傾ける

このように、指定の要素の前後に追加スタイルを適用させることができます。

まとめ

名前が似ている擬似クラスと擬似要素についてまとめました。

どちらもHTMLを書き換えずに使用する部分は共通していますが使用する場面は異なります。

文字通り擬似クラスはクラスを、擬似要素は要素を「追加」して状態を変化させていると考えるのが

個人的には一番理解しやすかったです。

頻出のコードはしっかりと理解してわかりやすいコードの作成につなげていきたいです。