概要
複数の要素を並べる時によく、
「3番目の要素だけ指定してデザインをあてたい」や
「奇数・偶数番目の要素だけ指定してデザインをあてたい」などがよくある。
その度Google先生に聞いてみると、:nth-of-type( ) と :nth-child( )と出てくるが、
どっちもn番目の要素を指定することができるので、正直混乱する。
そのため、この記事では、:nth-of-type( ) と :nth-child( )の違いの解説と、
n番目、nの倍数番目などどんな指定でも使いこなせるようにサンプルの解説を行います。
結論
:nth-of-type( ) と :nth-child( )の違いは、要素の数え方です。
:nth-child()の場合
:nth-child()は、同じ親要素にある兄弟関係の全ての要素の中で何番目になるのかを指定するものになります。
つまりこんな感じになります。
<!--タグに指定する p:nth-child() -->
<div>
<p>1番目</p>
<a>2番目</a>
<p>3番目</p>
<p>４番目</p>
</div>
p:nth-child()では、 pタグに指定しているので、２番目のaタグにはスタイルがあたりません。
<!--classに指定する .style:nth-child() -->
<div>
<p>1番目</p>
<a>2番目</a>
<p class="style">3番目</p>
<p class="style">４番目</p>
</div>
.style:nth-child()で .styleに指定しているので、1番目、２番目の.styleが指定されていない要素にはスタイルがあたりません。
:nth-of-type() の場合
:nth-of-type()は、同じ親要素にある兄弟関係の指定した要素の中で何番目になるのかを指定するものになります。
つまりこんな感じになります。
<!--タグに指定する p:nth-of-type() -->
<div>
<p>1番目</p>
<a> </a>
<p>2番目</p>
<p>3番目</p>
</div>
aタグは、順番には入りません。
<!--classに指定する p.style:nth-of-type() -->
<div>
<p>1番目</p>
<a> </a>
<p class="style">2番目</p>
<p class="style">3番目</p>
</div>
nth-of-type()は、class要素には対応していないので、.styleが指定されているpタグが数えられます。
nth-of-type と nth-child を使いこなす
最初を指定する
:first-child :first-of-type
p:first-child {
/*スタイルが入る*/
}
p:first-of-type {
/*スタイルが入る*/
}
最後を指定する
:last-child :last-of-type
p:last-child {
/*スタイルが入る*/
}
p:last-of-type {
/*スタイルが入る*/
}
最初からx番目を指定する
:nth-child(x) :nth-of-type(x)
/*３番目の要素を指定する*/
p:nth-child(3) {
/*スタイルが入る*/
}
p:nth-of-type(3) {
/*スタイルが入る*/
}
最後からx番目を指定する
:nth-last-child(x) :nth-last-of-type(x)
/*３番目の要素を指定する*/
p:nth-last-child(3) {
/*スタイルが入る*/
}
p:nth-last-of-type(3) {
/*スタイルが入る*/
}
x番目から最後までを指定する
:nth-child(n+x) :nth-of-type(n+x)
/*３番目からの要素を指定する*/
p:nth-child(n+3) {
/*スタイルが入る*/
}
p:nth-of-type(n+3) {
/*スタイルが入る*/
}
最後からx番目までを指定する
:nth-child(-n+x) :nth-of-type(-n+x)
/*３番目までの要素を指定する*/
p:nth-child(-n+3) {
/*スタイルが入る*/
}
p:nth-of-type(-n+3) {
/*スタイルが入る*/
}
最後のx番目から最後までを指定する
:nth-last-child(n+x) :nth-last-of-type(n+x)
/*３番目からの要素を指定する*/
p:nth-last-child(n+3) {
/*スタイルが入る*/
}
p:nth-last-of-type(n+3) {
/*スタイルが入る*/
}
最初から最後のx番目までを指定する
:nth-last-child(-n+x) :nth-last-of-type(-n+x)
/*３番目までの要素を指定する*/
p:nth-last-child(-n+3) {
/*スタイルが入る*/
}
p:nth-last-of-type(-n+3) {
/*スタイルが入る*/
}
xの倍数番目
:nth-child(xn) :nth-of-type(xn)
/*３の倍数番目からの要素を指定する*/
p:nth-child(3n) {
/*スタイルが入る*/
}
p:nth-of-type(3n) {
/*スタイルが入る*/
}
xの倍数番目のy個となり
:nth-child(xn+y) :nth-of-type(xn+y)
/*３の倍数番目から2個となりの要素を指定する*/
p:nth-child(3n+2) {
/*スタイルが入る*/
}
p:nth-of-type(3n+2) {
/*スタイルが入る*/
}
兄弟要素が自分1個だけを指定する
:only-child :only-of-type
p:only-child {
/*スタイルが入る*/
}
p:only-of-type {
/*スタイルが入る*/
}
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！