- 投稿日：2022年03月26日 08時58分56秒
- 更新日：2022年03月26日 08時58分58秒
擬似クラス【hover / nth-of-type / nth-child】
詳細
擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。
by 株式会社 アーティス
以下のように記述することで使用します。
設定したい要素:疑似クラス名{}疑似要素の中でもよく使われるのが「hover」です。その他に便利な機能として「nth-of-type」「th-child」がありますので、この３つを紹介します。
マウスポインタが重なっている状態のときに適用する: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>子要素１：a１</a>
<p>子要素２：p１</p>
<p>子要素３：p２</p>
<a>子要素４：a２</a>
<a>子要素５：a３</a>
<p>子要素６：p３</p>
<p>子要素７：p４</p>
<a>子要素８：a４</a>
</div> 例を確認すると、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>子要素１：a１</a>
<p>子要素２：p１</p>
<p>子要素３：p２</p>
<a>子要素４：a２</a>
<a>子要素５：a３</a>
<p>子要素６：p３</p>
<p>子要素７：p４</p>
<a>子要素８：a４</a>
</div>この場合のセレクタの意味は「#nth-of-type-example4 > p要素の兄弟要素のうち、2n番目の要素かつp要素」となります。 そのため例の通り、何個目のp要素に適用するスタイルというものにはならないことに注意してください。
