【初心者向け：疑似要素・疑似クラスの種類と基本的な使い方】
スタイルをあてる際何かと便利な疑似要素・疑似クラスの種類とその使い方についてまとめました。
そもそも疑似要素、疑似クラスとは
スタイルを適用する対象を指定するセレクタの一種で、この二つを駆使するとより細かな指定が可能です。
疑似要素...HTML上で指定されていない範囲や存在していない要素に対して適用するセレクタ
疑似クラス...要素が特定の状態にある場合に対してのみ適用するセレクタ
まず例を追って見てみましょう。
よく使う疑似要素
- ①疑似要素::before
- ②疑似要素::after
- ③疑似要素::first-letter
①疑似要素::before
その要素の直前に要素を作ることができます。
html
<div>
<p>このテキストの前にくる</p>
</div>
CSS
div p:before{
content:"テキストの前にきた";
color:red;
}
ブラウザ上で反映するとこのように表示されます。
②疑似要素::after
先ほどのbeforeのように、その要素の直後に要素を作ることができます。
CSS
div p:after{
content:"テキストの後ろにきた";
color:red;
}ブラウザ上で反映するとこのように表示されます。
上記のように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; }ブラウザ上で反映するとこのように表示されます。
よく使う疑似クラス
- ①疑似クラス: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; }ブラウザ上で反映するとこのように表示されます。
②疑似クラス:visited
:visitedは訪問済みのリンクに対してスタイルを指定できます。
こちらは初期値では紫色です。
html
<div>
<p><a href="#">訪問済みのリンク色を緑にします。</a></p>
</div>
CSS
a:visited{ color:green; }ブラウザ上で反映するとこのように表示されます。
③疑似クラス:hover
カーソルを乗せた状態の要素に対してスタイルを指定できます。
html
<div>
<p><a href="#">カーソルを乗せた状態でバックが黄色になります。</a></p>
</div>
CSS
a:hover{ background:yellow; }ブラウザ上で反映するとこのように表示されます。
④疑似クラス:nth-child(n)
要素内のｎ番目にあたる要素にスタイルを指定できます。
また、n番目の指定以外にも下記のように偶数、奇数、最初、最後なども細かく指定できます。
- :nth-child(2)
- 2(任意の数字）番目の要素に指定
- :nth-child(2n)
- 2(任意の数字）個置きの要素に指定
- :nth-child(even)
- 偶数の順番にある要素に指定
- :nth-child(odd)
- 奇数の順番にある要素に指定
- :first-child
- 一番最初の要素に指定
- :last-child
- 一番最後の要素に指定
注意：指定した要素内の兄弟全体の中から数えての順番指定になりますので、目的の要素がその順番になかった場合は反映がされませんのでご注意ください。
下記CSS:first-childの場合では、h4タグが一番最初の要素になりますので反映されていません。
html
<div>
<h4>これはh4タグです。</h4>
<p>pタグの1番目です。</p>
<p>pタグの2番目です。</p>
<p>pタグ3番目です。</p>
<p>pタグ4番目です。</p>
<p>pタグの5番目です。</p>
</div>CSS:nth-child(2)の場合
div p:nth-child(2){ background:yellow; }CSS:nth-child(2n)の場合
div p:nth-child(2n){ background:yellow; }CSS:nth-child(even)の場合
div p:nth-child(even){ background:yellow; }CSS:nth-child(odd)の場合
div p:nth-child(odd){ background:yellow; }CSS:first-childの場合
div p:first-child{ background:yellow; }
CSS:last-childの場合
div p:last-child{ background:yellow; }
⑤疑似クラス:nth-of-type(n)
先ほどのnth-child(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; }CSS:nth-of-type(2n)の場合
div p:nth-of-type(2n){ background:yellow; }CSS:nth-of-type(even)の場合
div p:nth-of-type(even){ background:yellow; }CSS:nth-of-type(odd)の場合
div p:nth-of-type(odd){ background:yellow; }CSS:first-of-typeの場合
div p:first-of-type{ background:yellow; }CSS:last-of-typeの場合
div p:last-of-type{ background:yellow; }
