【CSS】要素から何番目、~番目以降。最初の要素、最後の要素。指定方法いろいろ②

2024年6月12日2025年3月4日

今回はn番目、n番目以降。
〇〇からみて最初の要素、〇〇からみて最後の要素。

他にも奇数や偶数などもご紹介していきます。

今回の基本のHTML

<ul class="example">
    <li>最初の要素「ネズミ」</li>
    <li>2番目の要素「りす」</li>
    <li>3番目の要素「うさぎ」</li>
    <li>4番目の要素「ねこ」</li>
    <li>5番目の要素「わんこ」</li>
    <li>最後の要素「カメ」</li>
</ul>

今回は分かりやすく　ul >li　の構造にしていますが、
親はdivでもtableでもなんでもいいです。
とにかく「親」と「子」がいれば良いのです。

n番目

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「わんこ」
最後の要素「カメ」

.example li:nth-child(3) {
  color:pink;
}

指定要素から見て3番目子要素　という意味ですね。
これは簡単です。

数えるのが面倒ですが、20番目とか都度変更が可能です。

〇〇のn番目まで

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「わんこ」
最後の要素「カメ」

.example li:nth-child(-n+3) {
  color:pink;
}

「-n」がややこしいですが、子要素の最初の要素から何番目まで指定できます。

n番目〜（以降）

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「わんこ」
最後の要素「カメ」

.example li:nth-child(n+3) {
  color:pink;
}

指定した要素の３番目以降の全ての子要素。

以降の全て　になりますので、さらにその下も全てに効きます。

こんな感じです。

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
- 3番目の子要素「子うさぎ1」
- 3番目の子要素「子うさぎ2」
- 3番目の子要素「子うさぎ3」
4番目の要素「ねこ」
- 4番目の子要素「ねこ1」
- 4番目の子要素「ねこ2」
- 4番目の子要素「ねこ3」
5番目の要素「わんこ」
最後の要素「カメ」

最初の要素

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「わんこ」
最後の要素「カメ」

.example4 li:first-child {
  color:pink;
}

指定した要素の最初の要素。

【応用】最初から○番目

もちろん先ほどの応用で最初から３番目。

例

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「わんこ」
最後の要素「カメ」

.example li:first-child(3) {
  color:pink;
}

なども指定できます。（-n）がない分かりやすいですね！

最後の要素

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「わんこ」
最後の要素「カメ」

.example li:last-child {
  color:pink;
}

指定した要素の最後の要素

【応用】最後から○番目全て

例

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「わんこ」
最後の要素「カメ」

.example li:last-child(n+3){
  text-decoration: underline;
}

応用は例です。
沢山応用しようと思えばできますので、いろいろ試してみると楽しくなっちゃうかもです。

偶数・奇数

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「とら」
6番目の要素「らいおん」
7番目の要素「きりん」
8番目の要素「ぞう」
9番目の要素「おかぴ」
10番目の要素「わんこ」
最後の要素「カメ」

.example li:nth-child(odd){
  color:pink;
}
.example li:nth-child(even){
  color:red;
}

偶数がeven　奇数がodd　となります。

要素の○倍

個人的にはあまり使わないですが、
一つは2倍、方や３倍で、デザインを変えたりするとランダムで可愛くなりそうですね！

最初の要素「ネズミ」
2番目の要素「りす」
3番目の要素「うさぎ」
4番目の要素「ねこ」
5番目の要素「とら」
6番目の要素「らいおん」
7番目の要素「きりん」
8番目の要素「ぞう」
9番目の要素「おかぴ」
10番目の要素「わんこ」
最後の要素「カメ」

.example li:nth-child(3n){
  color:pink;
}

child と type

nth-child と nth-of-typeに違いはあるのか・・

比べてみます。

先程のul>liだと分かりにくいので、divの構造に変更します。

使用したHTML

<div class="example">
	<p>最初の要素「ネズミ」</p>
	<p>2番目の要素「りす」</p>
	<div>
		<p>- 3番目の要素1「うさぎpちゃん」</p>
		<strong>- 3番目の要素2「うさぎツヨちゃん」</strong>
		<p>- 3番目の要素3「うさぎp2ちゃん」</p>
		<p>- 3番目の要素4「うさぎp3ちゃん」</p>
	</div>
	<div>4番目の要素「ねこ」</div>
	<p>5番目の要素「わんこ」</p>
	<p>最後の要素「カメ」</p>
</div>

child

最初の要素「ネズミp」

2番目の要素「りすp」

– 3番目の要素1「うさぎpちゃん」

– 3番目の要素2「うさぎツヨちゃん」

– 3番目の要素3「うさぎp2ちゃん」

– 3番目の要素4「うさぎp3ちゃん」

4番目の要素「divねこ」

5番目の要素「わんこp」

最後の要素「カメp」

/* 2番目 */
.example p:nth-child(2) {
  border: solid;
}
/* 4番目 */
.example p:nth-child(4) {
  font-weight: bold;
}
/* 3番目以降 */
.example p:nth-child(n+3) {
  text-decoration: line-through;
}
/* 最後から2番目 */
.example p:nth-last-child(2) {
  color:palevioletred;
}
/* 3の倍数 */
.example p:nth-child(3n){
  background-color:aliceblue;
}

今までご紹介した指定は、全てchildですよね。

こちらは、全ての要素の数　を単純に数えます。

child（子供）なので分かりやすいですね。

ここで、注意するのが、
子供なだけに・・全ての数を数えはしますが、そこに指定のpタグがないとスルーします。

結構よく「あれ？効かないよ」と言われて勘違いしてる人も多いようです。

私は、子供は十人十色で覚えました！笑

はい。なので、いろんなタグが混ざってるけどそこには指定タグ(ここではp)があるんじゃ〜って時に使ってください。

type

最初の要素「ネズミp」

2番目の要素「りすp」

– 3番目の要素1「うさぎpちゃん」

– 3番目の要素2「うさぎツヨちゃん」

– 3番目の要素3「うさぎp2ちゃん」

– 3番目の要素4「うさぎp3ちゃん」

4番目の要素「divねこ」

5番目の要素「わんこp」

最後の要素「カメp」

/* 2番目 */
.example p:nth-of-type(2) {
  border: solid;
}
/* 4番目 */
.example p:nth-of-type(4) {
  font-weight: bold;
}
/* 3番目以降 */
.example p:nth-of-type(n+3) {
  text-decoration: line-through;
}
/* 最後から2番目 */
.example p:nth-last-of-type(2) {
  color:palevioletred;
}
/* 3の倍数 */
.example p:nth-of-type(3n){
  background-color:aliceblue;
}

こちらは今回初めてみた指定かと思います。

個人的にはよくchildよりnth-of-type　の方がよく使います。

なぜなら、指定した要素の数　で数えてくれるからです。

そう・・マークアップで追加が入っても、ブレない。この指定が好きです。笑

できる限り、spanやstrongタグなどで入れるとブレずに修正できます