【CSS】疑似クラスについて知ろう

【CSS】疑似要素について知ろうの記事では「疑似要素」について書きましたが、似た言葉で「疑似クラス」があるともご紹介しました。
今回はこの「疑似クラス」について説明します。

疑似クラスとは？

疑似クラスも、疑似要素同様にセレクタ―に付与します。
疑似クラスは、付与した要素に対して「特定の状態」のCSSを適用することができます。ここが疑似要素との違いです。
具体的に見てみましょう。疑似クラスの代表例として、:hoverがあります。

aタグが「ホバー状態（カーソルが乗っている状態）」では下線がなくなる、という記述です。
このように、条件を付けてCSSを適用することができます。これが疑似クラスです。
疑似クラスは疑似要素と違って、コロンの数は1つになります。

疑似クラスの例

疑似クラスは数が多いですが、代表的ものをいくつか紹介します。

リンク（aタグ）で使用する疑似クラス

:link　…未訪問のリンクのスタイル
:visited　…訪問済みのリンクのスタイル
:hover　…カーソルが乗っている状態のスタイル
:active　…クリックしてから離すまでの状態のスタイル

aタグで使用される代表的な疑似クラスです。それぞれに文字色を指定することが多いですね。
CSSでは後に記述したスタイルが優先されてしまうので、上記の順番で記述するようにしてください。

要素の順番を指定する疑似クラス

:first-child …要素内の最初の子要素
:first-of-type …要素内の最初の子要素
:nth-child(n) …要素内のn番目の子要素
:last-child …要素内の最後の子要素
など

ある要素の中の子要素の順番を指定する疑似クラスです。
リストタグ（ul li)などで使用することが多いです。

:not()クラス

「指定したセレクタに一致しない要素」という条件を付与することができます。

上記のように記述すると、リンゴ以外のli要素の文字色が緑になります。
カッコ内には、クラス名だけでなく疑似クラスも入れることができます。

疑似要素と疑似クラスは組み合わせることができる

このように、「liの最初の要素」の「::before」を指定することができます。

まとめ

疑似要素も疑似クラスも、CSSを使用する上では欠かせないものです。
表現の幅が広がりますので、それぞれ活用できるようにしておきましょう。