【CSS】擬似クラスとは？

擬似クラスとは

擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。
文章構造の範囲外にある情報によってスタイルを変化させることができます。
例えば、ユーザーのポインターが当たったときにボタンの色を変更することなどができます。

よく使う擬似クラス

:link

link擬似クラスは、Ｗebサイト内にあるリンクのうち、未訪問のリンクのスタイルを指定する擬似クラスです。

HTML

<a href="https://design-baum.jp/">サンプル</a>

CSS

a:link{
  color: blue;
}

このように指定すると、以下のようになります。サンプルの文字をクリックすると、指定のURLに飛ぶようになります。

:visited

visited擬似クラスは、Ｗebサイト内にあるリンクのうち、訪問済みのリンクのスタイルを指定する擬似クラスです。

HTML

<a href="https://design-baum.jp/">サンプル</a>

CSS

a:visited{
  color: purple;
}

このように指定すると、上記のリンクが訪問済みの場合は、リンクの文字色を紫にすることができます。

:hover

hover擬似クラスは、指定した要素にカーソルが重なっている、いわゆるオンマウスの時のスタイルを指定する擬似クラスです。

HTML

<a href="https://design-baum.jp/">サンプル</a>

CSS

a:hover{
  color: #31AC25;
}

このように指定すると、上記のリンクにカーソルが重なっている場合は、文字色を緑にすることができます。

:active

active擬似クラスは、指定した要素がクリックされている時のスタイルを指定する擬似クラスです。

HTML

<a href="https://design-baum.jp/">サンプル</a>

CSS

a:active{
  color: #E42D31;
}

クリックをしている状態だと、赤く変化することが分かります。

:nth-of-type(n)

:nth-of-type(n)とは指定した要素のうちn番目の要素にCSSのスタイルを適用する疑似クラスになります。

HTML

<div>
 <h2>タイトル</h2>
 <p>1番目</p>
 <p>2番目</p>
 <p>3番目</p>
</div>

CSS

div p:nth-of-type(2) {
    color: blue;
}

2番目のpタグの文字色を変えたい場合、上記のようなCSSを適用する事で文字色を変える事ができます。
親要素(div)内にあるpタグから数えて2番目のpタグの文字色を変えるように指定しています。
この他にも奇数のみ(odd)、偶数のみ(even)、特定の倍数(2n、3n、4n….)など設定することができます。
奇数のみだと奇数番目に適用され、偶数のみだと偶数番目に適用されるようになります。

:nth-child(n)

:nth-child(n)は、子要素の番号などを指定してスタイルを適用させることができる類似クラスです。

親要素から見て複数の要素がある中で、一部の要素のみ背景色を変えたい！といったときなどに使用します。例えば、以下のようにリストに項目が並んでいるときに役立ちます。

HTML

<div>
 <h2>タイトル</h2>
 <p>1番目</p>
 <p>2番目</p>
 <p>3番目</p>
</div>

ここで、N番目にのみ条件を適用させたいときにnth-child(N)を使います。

CSS

div p:nth-child(3) {
    color: blue;
}

上記のようにNに3を入れると、２番目のpタグの要素だけに条件が適用されます。

「:nth-of-type(n)」とは何が違うのだろうと思ったのではないでしょうか。それは指定した要素以外の要素を数えるか、数えないかの違いになります。
「:nth-child(n)」の場合、親要素(div)内の子要素(h1、p)を上から数えてn番目の子要素を指定する必要があります。
今回は親要素(div)の中に、h2タグ、pタグその次にCSSを適用させたいpタグがあるため「nth-child(3)」の指定をしています。ややこしいですが徐々に使い分けていきましょう！

:not()

:not()は、CSSの中で特定のセレクタ以外の要素にスタイルを指定したい場合に使います。

p {
  color: blue;
}

上記の場合は色が青になりますが、:not()を使うと以下のような記述になります。

:not(p) {
  color: blue;
}

p要素が除外され、それ以外の要素の文字が青色になります。
:not()は、特定の要素などを除外するため、否定疑似クラスとも呼ばれます。
:not()は上記のような要素以外にも、クラスやid、属性などを入力することができます。

:not()の注意点

:not()にはいくつかの注意点があります。

li:not(:not(.sample)){
  background-color: red;
}