CSS 擬似クラス・擬似要素の使い方とまとめ

どうも、僕です。
「もう〜いくつねると〜お正月〜」の季節ですが、バンクーバーにはお正月というも何もないので少し寂しいです。
あの年末年始の感じはやっぱり日本でしか味わえないので、いつか冬だけ日本に帰るみたいな生活ができたらと思っています。

では、今回は「CSS 擬似クラス、擬似要素の使い方」ということで、そもそもこいつら何？というとこから、どうやって使うの？まで説明していきたいと思います。

擬似クラスと擬似要素の違い

まずは簡単に擬似クラスと擬似要素の違いを説明します。

上記のような違いがある擬似クラスと擬似要素ですが、書き方は「要素:擬似クラス or 擬似要素」です。

擬似クラスの種類

ではまず擬似クラスの種類から説明していきます。

a:link{}
a:visited{}
a:hover{}
a:active{}
a:focus{}
a:first-child{}
a:lang{}

とまあこんだけあるのですが、linkとvisitedはa要素でしか使用できません。
また、focusはform要素での使用しかできません。
擬似クラスの中で一番よく目にするのはhoverでしょうかね。僕は擬似クラスとかそういうのを意識せずこの前まで使っていました。

擬似クラスの使用方法

1.link

リンク先に未訪問の場合に適用。

a:link{
background:yellow;
}

※リンク先に未訪問の場合、a要素のバックグラウンドが黄色になります。

2.visited

リンク先に訪問済みの場合に適用。

a:visited{
color:red;
}

※リンク先に訪問済みの場合、a要素の文字色が赤になります。

3.hover

対象の要素上にマウスが乗っているときに適用。様々な要素に対して使用可能です。

a:hover{
color:orange;
}

※a要素にマウスのカーソルをあわせた時に、文字色がオレンジになります。

4.active

要素を選択し、アクティブになったときに適用。例えるとマウスを押している間などがあてはまります。

a:active{
color:gray;
}

※a要素がアクティブ（クリックして、マウスを離すまで）の時に、文字色がグレーになります。

5.focus

要素にフォーカスしたとき

input[type=text]:focus{
background:yellow;
}

※テキストボックスにフォーカスした時に、背景が黄色になります。

6.first-child

指定した要素が他の要素の最初の子要素の場合

li:first-child{
font-size:40px;
font-weight:bold;
}

※リスト要素の最初のliだけ上記のスタイルが適用されます。

7.lang

指定の要素がどの言語コードで記述されてるかによってスタイルを指定できます

p:land(jp){
color:navy;
}

※日本語でp要素が記述されている場合、文字色が紺色になります。

とこんな感じで擬似クラスの説明は終わります。また擬似クラスとにた属性セレクタや隣接セレクタというものもあるのですが、今回は記事が長くなりすぎるため説明しません。

では、次に擬似要素についての説明に移りたいと思います。

擬似要素の種類

a:after{}
a:before{}
p:first-letter{}
p:first-line{}

擬似要素の使い方

1.after

要素の直後に内容を挿入する際に使用します。

a:after{
content:"★";
}

※a要素のあとに「★」が挿入されます。

2.before

a:before{
content:"■";
}

※a要素の前に「■」が挿入されます。

とまぁかけあしでafterとbeforeについて説明しましたが、この両方を使いこなせるようになるとCSSで表現できる幅がものすごく広がるのでぜひまだ試してない人は勉強されることをお勧めします。
ちなみに例としては、吹き出しとか、アイコンとか、リボンとか使い方次第で様々な表現が可能になります。

参考：
意外と知らない！疑似要素と疑似クラスでできること
CSSだけで簡単に吹き出しを作成する方法4つ！

とか調べれば山ほど出てくるので、ぜひ試してみてください。

3.first-letter

こいつは、僕はあまり使用したことないのですが、ブロック要素の最初の1文字を対象にCSSを適用します。※インライン要素には適用できません。

a要素はインライン要素なので今回はp要素をサンプルで使用します。

p:first-letter{
background:orange;
}

※pタグ内の一文字目の背景がオレンジ色に変わります。

4.first-line

こちらも上記のfirst-letterと同じでブロック要素にしかしようできません。

p:first-line{
font-weight:bold;
font-size:120%;
}

※pタグの一行目だけ文字サイズ120%で太字になります。

まとめ

結構駆け足で説明してきてしまったので、あまり深いところまでは説明できていませんが「擬似クラスと擬似要素にはこんなのがあるんだー」とか「こんな使い方できるんだー」とか思ってくれたら幸いです。
今度、afterやbeforeなどの具体的な使用例を説明した記事を書くつもりなので是非ご覧ください。

では。メリークリスマス。