小金井にあるWEB制作会社の備忘録

MEMORANDUM

CSSの疑似クラスを使ってn番目の要素を取得

HTMLコーディングをしているとn番目の要素から間隔を空けたり、交互に彩色したりということが多いので、n番目の要素(タグ)を取得できる便利なCSSの疑似クラスをメモ。

n番目系の疑似クラス

n番目系の疑似クラスは大きく分けて「-child」と「-of-type」の2種類の系統に分類できる。
「i」の部分に整数値、odd(奇数)、even(偶数)、式(例:2n+1)を指定可能。数値は親要素からの値になる。

種類-child-of-type
最初:first-child:first-of-type
最後:last-child:last-of-type
i番目:nth-child(i):nth-of-type(i)
後ろからi番目:nth-last-child(i):nth-last-of-type(i)
1個だけ:only-child:only-of-type
i番目以降:nth-child(n+i):nth-of-type(n+i)
i番目以前:nth-child(-n+i):nth-of-type(-n+i)
最後からi個:nth-last-child(-n+i):nth-last-of-type(-n+i)
最後からi番目以前:nth-last-child(n+i):nth-last-of-type(n+i)

「-child」と「-of-type」の違い

「-child」と「-of-type」の違いはカウントの対象となる子要素の違い。
「-child」は全部の子要素が対象になるのに対して、「-of-type」は子要素の中でも指定した要素のみがカウントの対象となる。

<div class="parents">
<div>兄</div>
<div>自分</div>
<p>1番目の弟</p>
<p>2番目の弟</p>
<p>3番目の弟</p>
<div>

<style>
/*1番目の弟が指定される*/
p:nth-child(3) {
	color: #f00;
}

/*3番目の弟が指定される*/
p:nth-of-type(3) {
	color: #00f;
}
</style>

その他のセレクタ

種類
隣の要素h3+p
[class]や[href][src]など指定した属性p[class]
属性内容の“一部”が一致p[class*=”○○○○”]
属性内容の“始め”が一致p[class^=”○○○○”]
属性内容の“最後”が一致p[class$=”○○○○”]
文章の一行目p::first-line
要素が空の時ul:empty

同一カテゴリーの記事