今回はCSSの:nth-of-type()や:nth-child()で「○番目〜○番目」「○番目以降」といった特定の範囲だけ指定する方法を解説します。
○番目以降の範囲
「○番目以降の要素」を指定する場合は:nth-of-type(n+○)と書きます。
例えば4番目以降の要素を指定したい場合は:nth-of-type(n+4)となります（HTMLは以降共通です）。
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
/* 4番目以降の要素を指定 */
.item:nth-of-type(n+4) {
background-color: pink;
}
実際の表示はこんな感じ。
4番目以降の要素だけが指定されて色が変わっているのが分かりますね。
See the Pen
zYZOZzq by wagashi000327 (@wagashi000327)
on CodePen.
最初から○番目までの範囲
「最初から○番目までの要素」を指定する場合は:nth-of-type(-n+○)と書きます。nにマイナスをつけるだけですね。
最初から4番目までの要素を指定する場合は:nth-of-type(-n+4)とすればokです。
/* 最初から4番目までの要素を指定 */
.item:nth-of-type(-n+4) {
background-color: pink;
}
See the Pen
RwpbpEB by wagashi000327 (@wagashi000327)
on CodePen.
「nにマイナスをつけると範囲が最初からになる」と覚えておきましょう。
○番目から○番目までの範囲
上の2つを組み合わせると「○番目から○番目までの要素」を指定することもできます。
例えば4番目から6番目の要素を指定したいなら:nth-of-type(n+4):nth-of-type(-n+6)と書きます。
:nth-of-type(n+4)は4番目以降、:nth-of-type(-n+6)は6番目まで、という意味ですね。ちょっと複雑ですが分けて考えると分かりやすいかもしれません。
「nにマイナスをつけると範囲が最初からになる」とさっき説明しましたが、この部分が最初からではなく4番目からに変わったと考えればokです。
/* 4番目から6番目までの要素を指定 */
.item:nth-of-type(n+4):nth-of-type(-n+6) {
background-color: pink;
}
See the Pen
WNpeOrE by wagashi000327 (@wagashi000327)
on CodePen.
最後から○番目以前の範囲
:nth-last-of-type()というものを使うことで、最後の要素を基準に範囲を指定できます。
今までは「最初」や「○番目以降」が基準でしたが、「最後を基準に範囲を指定したい」という場合はこっちを使えばできるわけですね。
最後から4番目以前の要素を指定したい場合は:nth-last-of-type(n+4)と書きます。
/* 最後から4番目以前の要素を指定 */
.item:nth-last-of-type(n+4) {
background-color: pink;
}
See the Pen
xxqKLpg by wagashi000327 (@wagashi000327)
on CodePen.
:nth-of-type()は最初が基準、:nth-last-of-type()は最後が基準という感じです。
最後から○番目以降の範囲
「最後から○番目以降」の要素を指定するには:nth-last-of-type(-n+○)と書きます。
例えば最後から4番目以降の要素を指定したいなら:nth-last-of-type(-n+4)とすれば大丈夫です。
See the Pen
dyvbzLm by wagashi000327 (@wagashi000327)
on CodePen.
:nth-of-type()は「nにマイナスをつけると範囲が最初からになる」と説明しましたが、:nth-last-of-type()は最後が基準なので、「nにマイナスをつけると範囲は最後からになる」ということですね。
奇数個目/偶数個目の要素
やや番外編ですが、:nth-of-type(odd)を使うと奇数個目の要素だけ、:nth-of-type(even)を使うと偶数個目の要素だけを指定できます。
oddとevenはそれぞれ英語のodd number（奇数）とeven number（偶数）から来ています。
奇数個目だけを指定するとこんな感じ。
/* 奇数個目の要素を指定 */
.item:nth-of-type(odd) {
background-color: pink;
}See the Pen
VwpZMMq by wagashi000327 (@wagashi000327)
on CodePen.
偶数個目だけを指定するとこんな感じ。
/* 偶数個目の要素を指定 */
.item:nth-of-type(even) {
background-color: pink;
}See the Pen
rNyBGwG by wagashi000327 (@wagashi000327)
on CodePen.
実務の観点から行くと1行ずつ逆になるレイアウトなどは結構頻繁に出てくるので、これは使える様になると強いと思います。
まとめ
:nth-of-type()で説明しましたが、:nth-child()でも同じことができます。
また、:nth-last-of-type()というのもありましたが、使用頻度で言えば:nth-of-type()の方が圧倒的に高いので、混乱しそうな人はとりあえずこっちだけでも使える様になっておけば大丈夫です。
正直:nth-last-of-type()ってあんまり使わないのでそこまで頑張って理解する必要はないかなって感じです。
それと、あまり複雑な指定にするとコードが読みづらくなって影響反映がわからなくなります。修正するときに自分の首を締めることになるので程々にしましょうね…。
