CSSの疑似クラスの使い方

CSSには擬似クラスと呼ばれるセレクタが用意されています。擬似クラスというのは、閲覧者のアクションに合わせてスタイルを適用させる仕組みのことです。

サンプル

このサンプルというリンクにマウスを載せると文字の色が変わり、クリックすると訪問済みということで色が変わります。この動きのことを擬似クラスと呼びます。

リンクで使われる擬似クラスは以下の4つです。

aタグの擬似クラス

a:link { color: #00f; } 未訪問リンク
a:visited { color: #90c; } 訪問済みリンク
a:hover { color: #f90; } ホバー時のリンク
a:active { color: #ff0; } 選択中のリンク

必ず全ての擬似クラスを指定しなければ行けないわけではありませんが、指定する場合はこの順番で記述します。「:hover」はaタグで良く使われますが、aタグ以外にも使うことができます。

この枠にマウスを載せると背景色が変わる。

このようにaタグ以外の要素に「:hover」を指定することもできます。

.kono:hover { background-color: #d9ecff; }

classやidの後に「:hover」を付けるだけです。今回は背景色を変えてみましたが、もちろん他のプロパティにしてもOKです。

他の擬似クラス

:focus テキスト入力のフォーカス
:first-child 親要素の最初の子要素

先ほどのaタグの擬似クラスとこの2つがCSS2でサポートされていた擬似クラスです。

CSS3から新たにサポートされた擬似クラスがありますが、数が多く初心者の方は使う機会が少ないと思いますので割愛します。以下のサイトで解説されていますので、興味のある方はそちらをご覧ください。

個人的にCSS3については、まだ必要性を感じておらず擬似クラスについても、始めに紹介したaタグで使う擬似グラスぐらいしか使っていません。CSSを憶えたばかりの人はとりあえずaタグ用の擬似クラスが頭に入っていれば十分だと思います。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2013年3月22日

サブコンテンツ

このページの先頭へ