よく使うCSSの疑似クラス4種類の使い方【CSS】

疑似クラスと聞くと難しそうな気もしますが、使ってみると便利で使いやすいものとなります。
そこで、まずはよく使用するCSS疑似クラス4種類の使い方を解説いたします。

疑似クラスとは

疑似クラスとは、要素が特定の状態である場合にスタイルを適用させるセレクタの事を言います。
例えば、カーソルが乗っている時、最初の要素、最後から2番目の要素など。

CSS疑似要素の::beforeと::afterの使い方と正しい書き方で解説した疑似要素とは違い、疑似クラスは:(コロン)1つで記述します。
そんな疑似クラスの中で、よく使う疑似クラスを4種類解説していきます。

よく使う疑似クラス4種類

:first-child

:first-childは、兄弟要素の中で最初の要素を指定します。
例として最初の要素だけ文字色を赤に変更します。

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
</ul>

li:first-child {
    color: red;
}

:last-child

:last-childは、兄弟要素の中で最後の要素を指定します。
例として最後の要素だけ文字色を青に変更します。

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
</ul>

li:last-child {
    color: blue;
}

:nth-child(n)

:nth-child(n)は、兄弟要素の中で最初からn番目の要素を指定します。「n」には数字が入ります。(2だと最初から2番目)
例として最初から2番目の要素だけ文字色を緑、太字に変更します。

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
</ul>

li:nth-child(2) {
    font-weight: bold;
    color: green;
}

:nth-last-child(n)

:nth-last-child(n)は、兄弟要素の中で最後からn番目の要素を指定します。「n」には数字が入ります。(3だと最後から3番目)
例として最後から3番目の要素だけ文字色をオレンジ、太字に変更します。

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
</ul>

li:nth-last-child(3) {
    font-weight: bold;
    color: orange;
}

さいごに

いかがでしたでしょうか。
以上がよく使う疑似クラス4種類となります。まだまだ便利な疑似クラスがありますので、後日改めて解説していきます。
これらを使えるようになると、余計なクラスが増えずに、管理が楽になりますのでぜひ覚えてみてください。