【初心者向け:疑似要素・疑似クラスの種類と基本的な使い方】

ひぐま
ひぐま

【初心者向け:疑似要素・疑似クラスの種類と基本的な使い方】

スタイルをあてる際何かと便利な疑似要素・疑似クラスの種類とその使い方についてまとめました。

そもそも疑似要素、疑似クラスとは

スタイルを適用する対象を指定するセレクタの一種で、この二つを駆使するとより細かな指定が可能です。

疑似要素...HTML上で指定されていない範囲や存在していない要素に対して適用するセレクタ

疑似クラス...要素が特定の状態にある場合に対してのみ適用するセレクタ

まず例を追って見てみましょう。

よく使う疑似要素

  • ①疑似要素::before
  • ②疑似要素::after
  • ③疑似要素::first-letter

①疑似要素::before

その要素の直前に要素を作ることができます。

html

<div>
<p>このテキストの前にくる</p>
</div>

CSS

div p:before{
 content:"テキストの前にきた";
 color:red;
}

ブラウザ上で反映するとこのように表示されます。

::beforeの表示

②疑似要素::after

先ほどのbeforeのように、その要素の直後に要素を作ることができます。

CSS

div p:after{
 content:"テキストの後ろにきた";
 color:red;
}

ブラウザ上で反映するとこのように表示されます。

::afterの表示

上記のようにcontentでテキストを指定するほかに、疑似的なブロック要素を追加することもできます。

例えば、あくまでデザイン的な要素として画像を差し込みたい時などに便利です。

html

<div>
 <p><img src="img/tearai01.png" alt="お手洗い中"></p>
 <p class="right"><img src="img/tearai02.png" alt="お手洗い後"></p>
</div>

CSS

div p{ display:inline-block; }
div img{ display:inline-block; width:100px; }
div .right::before{
	content:"";
	width:100px;
	height:76px;
	display:inline-block;
	background:url(img/gizi_yazirusi.png) no-repeat center center / 70%;
}

ブラウザ上で反映するとこのように表示されます。

疑似要素を使って画像を差し込む例

※注意点として、::before、::afterは規定でインライン要素のため、このように画像を差し込む場合、画像の収めるブロックのサイズと、content""、displayでブロック要素、インラインブロック要素どちらかの指定をしないと表示されませんので注意が必要です。

③疑似要素::first-letter

::first-letterでは、要素の一番初めの文字に対して指定をすることができます。

html

<div>
 <p>このように一番最初の文字だけに表示されます。</p>
 <p>この場合pタグの一番最初の文字だけに表示されます。</p>
</div>

CSS

div p::first-letter{ font-size:50px; color:green; }

ブラウザ上で反映するとこのように表示されます。

:first-letterの表示

よく使う疑似クラス

  • ①疑似クラス:link
  • ②疑似クラス:visited
  • ③疑似クラス:hover
  • ④疑似クラス:nth-child(n)
  • ⑤疑似クラス:nth-of-type(n)

①疑似クラス:link

:linkは未訪問のリンクに対してスタイルを指定できます。
ちなみに初期値では青色です。

html

<div>
<p><a href="#">未訪問のリンク色をオレンジにします。</a></p>
</div>

CSS

a:link{ color:orange; }

ブラウザ上で反映するとこのように表示されます。

:linkの表示

②疑似クラス:visited

:visitedは訪問済みのリンクに対してスタイルを指定できます。
こちらは初期値では紫色です。

html

<div>
 <p><a href="#">訪問済みのリンク色を緑にします。</a></p>
</div>

CSS

a:visited{ color:green; }

ブラウザ上で反映するとこのように表示されます。

:visitedの表示

③疑似クラス:hover

カーソルを乗せた状態の要素に対してスタイルを指定できます。

html

<div>
 <p><a href="#">カーソルを乗せた状態でバックが黄色になります。</a></p>
</div>

CSS

a:hover{ background:yellow; }

ブラウザ上で反映するとこのように表示されます。

:hoverの表示

④疑似クラス:nth-child(n)

要素内のn番目にあたる要素にスタイルを指定できます。
また、n番目の指定以外にも下記のように偶数、奇数、最初、最後なども細かく指定できます。

:nth-child(2)
2(任意の数字)番目の要素に指定
:nth-child(2n)
2(任意の数字)個置きの要素に指定
:nth-child(even)
偶数の順番にある要素に指定
:nth-child(odd)
奇数の順番にある要素に指定
:first-child
一番最初の要素に指定
:last-child
一番最後の要素に指定

注意:指定した要素内の兄弟全体の中から数えての順番指定になりますので、目的の要素がその順番になかった場合は反映がされませんのでご注意ください。
下記CSS:first-childの場合では、pタグが一番最初の要素になりますので反映されていません。

html

<div>
<h4>これはpタグです。</h4>
<p>リストの1番目です。</p>
<p>リストの2番目です。</p>
<p>リストの3番目です。</p>
<p>リストの4番目です。</p>
<p>リストの5番目です。</p>
</div>

CSS:nth-child(2)の場合

div p:nth-child(2){ background:yellow; }

:nth-child(2)の表示

CSS:nth-child(2n)の場合

div p:nth-child(2n){ background:yellow; }

:nth-child(2n)の表示

CSS:nth-child(even)の場合

div p:nth-child(even){ background:yellow; }

:nth-child(even)の表示

CSS:nth-child(odd)の場合

div p:nth-child(odd){ background:yellow; }

:nth-child(odd)の表示

CSS:first-childの場合

div p:first-child{ background:yellow; }

:first-childの表示

CSS:last-childの場合

div p:last-child{ background:yellow; }

:last-childの表示

⑤疑似クラス:nth-of-type(n)

先ほどのnth-child(n)と同じように順番を指定できますが、指定の同要素の中でのn番目にスタイルを指定できます。
例えばpタグであれば、pタグのグループ内で数えられます。

:nth-of-type(2)
2(任意の数字)番目の要素に指定
:nth-of-type(2n)
2(任意の数字)個置きの要素に指定
:nth-of-type(even)
偶数の順番にある要素に指定
:nth-of-type(odd)
奇数の順番にある要素に指定
:first-of-type
一番最初の要素に指定
:last-of-type
一番最後の要素に指定

CSS:nth-of-type(2)の場合

div p:nth-of-type(2){ background:yellow; }

:nth-of-type(2)の表示

CSS:nth-of-type(2n)の場合

div p:nth-of-type(2n){ background:yellow; }

:nth-of-type(2n)の表示

CSS:nth-of-type(even)の場合

div p:nth-of-type(even){ background:yellow; }

:nth-of-type(even)の表示

CSS:nth-of-type(odd)の場合

div p:nth-of-type(odd){ background:yellow; }

:nth-of-type(odd)の表示

CSS:first-of-typeの場合

div p:first-of-type{ background:yellow; }

:first-of-typeの表示

CSS:last-of-typeの場合

div p:last-of-type{ background:yellow; }

:last-of-typeの表示

関連記事