【CSS】疑似クラスって一体なんだ?

CSSを勉強している時に出てくる疑似クラス。

なんてわかりにくい用語なんだろう(笑)

CSSを勉強しながらずっと「疑似クラスってなにもの??」

と疑問に思っていたので簡単に調べてみた。

疑似クラスというのは、

「リンクに一度訪問したことがある」

などの特定の状態に応じてCSSを適用したい時に使うものらしい。

例えば、サイトの記事にリンクを挿入したとする。

そのリンクに対して下記のように指定してみる。

この場合の疑似クラスは、linkvisited のことだ。

これが前述した特定の状況を指定している。

a:link は「リンクに未訪問」:リンクをクリックしてそのページを開いたことがない場合、という状況の指定。

a:visitedは「訪問した」:リンクをクリックしてそのページに飛んだことがある、という状況の指定だ。

上記例では、リンクをクリックしたことがあるかないかでリンクの文字色を条件分岐させるために疑似クラスを使っている。

疑似クラスはHTMLの同じタグに対し、そのタグの状態によってCSSの指定を変えたい時に使う、と覚えておけば良さそうだ。

 

おすすめの記事