• 投稿日:2022年03月26日 08時58分56秒
  • 更新日:2022年03月26日 08時58分58秒
擬似クラス【hover / nth-of-type / nth-child】

擬似クラス【hover / nth-of-type / nth-child】

詳細

擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。

by 株式会社 アーティス

以下のように記述することで使用します。

設定したい要素:疑似クラス名{}

疑似要素の中でもよく使われるのが「hover」です。その他に便利な機能として「nth-of-type」「th-child」がありますので、この3つを紹介します。

マウスポインタが重なっている状態のときに適用する:hover

:hover は CSS の 擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。 普通はユーザーがカーソル (マウスポインター) で要素の上をホバー (通過) させたときにこの状態になります。

by MDN Web Docs

hover疑似クラスはリンクが張られている要素の背景色やマウスポインタを変えるために使用することが多いです。 これによって閲覧者にリンクが張られていることを通知しています。

hoverクラス指定

div要素の中にp要素があるというシンプルな構造です。 背景色はわかりやすくするために装飾しています。

<style>
    #hover-example1{
        background-color: yellow;
        padding: 5px;
    }
</style>
<div id="hover-example1">
    <a>リンク要素</a>
</div>

hover要素指定

マウスポインタが重なったとき、文字色と背景色を変更しています。

<style>
    #hover-example2{
        background-color: yellow;
        padding: 5px;
    }
    #hover-example2 > a:hover{
        color: red;
        background-color: gray;
    }
</style>
<div id="hover-example2">
    <a>リンク要素</a>
</div>

兄弟要素の中で指定要素のn番目の要素に適用する:nth-of-type

:nth-of-type() は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。

by MDN Web Docs

リストやテーブルに使用することが多いです。 例えば、テーブルの偶数行だけ背景を変えることによって見やすくするときなどに使います。

nth-of-typeクラス指定

<style>
    table#nth-of-type-example1{
        margin: 5px;
        width: calc(100% - 10px);
        height: 500px;
        border-collapse: collapse;
    }
    table#nth-of-type-example1 td{
        border: solid 1px black;   
    }
</style>
<table id="nth-of-type-example1">
    <tbody>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>                            
</table>

nth-of-typeクラス指定

複数行あるテーブル要素で、偶数行の背景色を変更しています。

<style>
    table#nth-of-type-example2{
        margin: 5px;
        width: calc(100% - 10px);
        height: 500px;
        border-collapse: collapse;
    }
    table#nth-of-type-example2 td{
        border: solid 1px black;   
    }
    table#nth-of-type-example2 > tbody > tr:nth-of-type(2n){
        background-color: aqua;
    }
</style>
<table id="nth-of-type-example2">
    <tbody>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>                               
</table>

親要素から見てN番目に適用するという疑似クラス:nth-child

CSS の :nth-child() 擬似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

by MDN Web Docs

nth-of-type()疑似クラスに類似したもので、こちらは指定要素の親要素から見て何番目に適用するという疑似クラスです。 nth-of-type()疑似クラスとの違いは、型の指定がないということです。

サンプルを含めてnth-of-type()疑似クラスとの違いを見ていきましょう。

nth-of-type()疑似クラスとnth-child()疑似クラスの比較

div要素の子要素として、a要素とp要素が交互に記載しています。 そしてp要素にnth-of-type(2n)疑似クラスを設定し、背景色を変更します。

<style>
	#nth-of-type-example3{
		width: 100%;
		height: 500px;
	}
	#nth-of-type-example3 > *{
		display: block;
		width: 100%;
		margin: 5px 0 ;
	}
	#nth-of-type-example3 > p:nth-of-type(2n){
		background-color: aqua;
	}
</style>
<div id="nth-of-type-example3">
    <a>子要素1:a1</a>
    <p>子要素2:p1</p>
    <p>子要素3:p2</p>
    <a>子要素4:a2</a>
    <a>子要素5:a3</a>
    <p>子要素6:p3</p>
    <p>子要素7:p4</p>
    <a>子要素8:a4</a>
</div>   
子要素1:a1

子要素2:p1

子要素3:p2

子要素4:a2 子要素5:a3

子要素6:p3

子要素7:p4

子要素8:a4

例を確認すると、p要素以外が無視されていることがわかります。 そのため間にa要素などがいくら入っていても関係なくスタイルを適用することが出来ます。

nth-of-type()疑似クラスとnth-child()疑似クラスの比較

div要素の子要素として、a要素とp要素が交互に記載しています。 そしてp要素にnth-child(2n)疑似クラスを設定し、背景色を変更します。

<style>
	#nth-of-type-example4{
		width: 100%;
		height: 500px;
	}
	#nth-of-type-example4 > *{
		display: block;
		width: 100%;
		margin: 5px 0 ;
	}
  #nth-of-type-example4 p:nth-child(2n){
      background-color: aqua;
  }
</style>
<div id="nth-of-type-example4">
    <a>子要素1:a1</a>
    <p>子要素2:p1</p>
    <p>子要素3:p2</p>
    <a>子要素4:a2</a>
    <a>子要素5:a3</a>
    <p>子要素6:p3</p>
    <p>子要素7:p4</p>
    <a>子要素8:a4</a>
</div>
子要素1:a1

子要素2:p1

子要素3:p2

子要素4:a2 子要素5:a3

子要素6:p3

子要素7:p4

子要素8:a4

この場合のセレクタの意味は「#nth-of-type-example4 > p要素の兄弟要素のうち、2n番目の要素かつp要素」となります。 そのため例の通り、何個目のp要素に適用するスタイルというものにはならないことに注意してください。

最後に

SPECIAL THANKS

  1. 【初心者向け】CSSの擬似要素と擬似クラスを理解しよう! -株式会社 アーティス -
  2. :hover -MDN Web Docs-
  3. :nth-of-type() -MDN Web Docs-
  4. :nth-child() -MDN Web Docs-
JSアニメーション:文字の登場
CSSアニメーション:カク回転
画面右下固定のスクロールボタン
擬似クラス【hover / nth-of-type / nth-child】
疑似要素【before/after】
positionプロパティ(位置指定)について
タグにマウスホバーしたとき下線を走らせる
モーダルな画面を表示をする