読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

何番目系のおさらい nth-childとnth-of-typeの使い分け

スポンサードリンク

何番目を指定する要素を使わないサイトは少ないでしょう。
それくらい必須のcssセレクタです。

nth-childは要素の種類関係なく数を数えます。
それと違ってnth-of-typeは要素の種類を見ます。
そのためliではnth-childを使っていても問題ありませんが、複合的な要素の場合はnth-of-typeを使うわないと思ったようにいかないことが出てきます。

1番最初の要素 1番最後の要素 奇数 偶数

要素が単一の場合(nth-child)

  • 1 first-child
  • 2 even
  • 3 odd
  • 4 even
  • 5 nth-child(5)
  • 6 last-child

<ul class="n1-1">
<li>1 first-child</li>
<li>2 even</li>
<li>3 odd</li>
<li>4 even</li>
<li>5 nth-child(5)</li>
<li>6 last-child</li>
</ul>
.n1-1 li:nth-child(odd) {
  color: green;
}
.n1-1 li:nth-child(even) {
  color: blue;
}
.n1-1 li:nth-child(5) {
  color: orange;
}
.n1-1 li:first-child {
  color: red;
}
.n1-1 li:last-child {
  color: red;
}

このように兄弟要素がliの場合、-childで思い通りにスタイルが当たっています。

要素が複合的な場合(nth-child)(うまくいってない例)

span1 first-child

p1

p2 nth-child(3)

p3

p4

last-child

<div class="n1-2">
<span>span1 first-child</span>
<p>p1 p:nth-child(even)</p>
<p>p2 nth-child(3)</p>
<p>p3 nth-child(even)</p>
<p>p4 nth-child(odd)</p>
<span>last-child</span>
</div>
/*↓奇数ではなく偶数のp要素が効いてしまっている↓*/
.n1-2 p:nth-child(odd) {
  color: green;
}
/*↓偶数ではなく奇数のp要素が効いてしまっている↓*/
.n1-2 p:nth-child(even) {
  color: blue;
}
.n1-2 span:first-child {
  color: red;
}
/*↓効いていない↓*/
.n1-2 p:first-child {
  color: blue;
}
.n1-2 p:nth-child(3) {
  color: orange;
}
.n1-2 span:last-child {
  color: green;
}
/*↓効いていない↓*/
.n1-2 p:last-child {
  color: yellow;
}

p要素にnth-child(3)を当てているわけですが、span要素が1個目に来ているためそれも含めてその順番が決まってしまうのでがnth-childです。

要素が複合的な場合 (of-type)

span1

p1 first-of-type

p2

p3

p4 last-of-type

span2

<div class="n1-3">
<span>span1</span>
<p>p1 first-of-type</p>
<p>p2</p>
<p>p3</p>
<p>p4 last-of-type</p>
<span>span2</span>
</div>
.n1-3 p:first-of-type {
  color: red;
}
.n1-3 p:last-of-type {
  color: green;
}

of-typeを使用することで期待通りのスタイルが当たりました。

n番目以上の要素

要素が単一の場合

  • 1
  • 2
  • 3 nth-child(n+3)
  • 4 nth-child(n+3)
  • 5 nth-child(n+3)

<ul class="n2-1">
<li>1</li>
<li>2</li>
<li>3 nth-child(n+3)</li>
<li>4 nth-child(n+3)</li>
<li>5 nth-child(n+3)</li>
</ul>
.n2-1 li:nth-child(n+3) {
  color: red;
}

n番目以上は:nth-child(n+指定したい要素の番号)になります。
上の例で行くと3番目以降はスタイルを当てるセレクタとなります。
またnは0, 1, 2...と数値が1ずつ上がっていきます。
なので、(n+3)だと3,4,5...となるわけですね。

n番目以下の要素

要素が単一の場合

  • 1 nth-child(-n+3)
  • 2 nth-child(-n+3)
  • 3 nth-child(-n+3)
  • 4
  • 5

<ul class="n2-2">
<li>1 nth-child(-n+3)</li>
<li>2 nth-child(-n+3)</li>
<li>3 nth-child(-n+3)</li>
<li>4</li>
<li>5</li>
</ul>
.n2-2 li:nth-child(-n+3) {
  color: red;
}
.n2-2 li:nth-last-child(-n+2) {
  color: green;
}

n番目以下は:nth-child(-n+指定したい要素の番号)になります。
上の例で行くと3番目以下の番号にスタイルを当てるセレクタとなります。
こちらもnは0, 1, 2...と数値が1ずつ上がっていきますので(n+3)とは逆に3,2,1と数値が下がっていきます。

n番目以上の要素 n番目以下の要素 最後から数えてn番目の要素

要素が複合的な場合(うまくいってない例)

span1

p1

p2 nth-child(n+3)

p3 nth-child(n+3)

p4 nth-child(n+3)

p5 nth-child(n+3)

span2

<div class="n2-3">
<span>span1</span>
<p>p1</p>
<p>p2 nth-child(n+3)</p>
<p>p3 nth-child(n+3)</p>
<p>p4 nth-child(n+3)</p>
<p>p5 nth-child(n+3)</p>
<span>span2</span>
</div>
.n2-3 p:nth-child(n+3) {
  color: red;
}

p要素にnth-child(n+3)を当てているので3番目のP要素からスタイルが当たりそうですが、p2から当たってしまっています。
こちらは先ほどの説明同様、nth-childが全ての兄弟要素の数を数えるからになります。

要素が複合的な場合(うまくいってない例)

span1

p1 nth-child(-n+3)

p2 nth-child(-n+3)

p3

p4 nth-last-child(-n+3)

p5 nth-last-child(-n+3)

span2

<div class="n2-4">
<span>span1</span>
<p>p1 nth-child(-n+3)</p>
<p>p2 nth-child(-n+3)</p>
<p>p3</p>
<p>p4 nth-last-child(-n+3)</p>
<p>p5 nth-last-child(-n+3)</p>
<span>span2</span>
</div>
.n2-4 p:nth-child(-n+3) {
  color: red;
}
.n2-4 p:nth-last-child(-n+3) {
  color: green;
}

nth-last-childは最後から数えて(-n+指定したい要素番目)となりますがこちらも最後のspan要素を数えているため
pが後ろの2つしかスタイルが当たりません。

要素が複合的な場合 n番目以下の要素 最後から数えてn番目の要素

span1

p1 nth-of-type(-n+2)

p2 nth-of-type(-n+2)

p3 nth-of-type(n+3)

p4 nth-of-type(n+3)

p5 nth-of-type(n+3)

span2

<div class="n2-5">
<span>span1</span>
<p>p1 nth-of-type(-n+2)</p>
<p>p2 nth-of-type(-n+2)</p>
<p>p3 nth-of-type(n+3)</p>
<p>p4 nth-of-type(n+3)</p>
<p>p5 nth-of-type(n+3)</p>
<span>span2</span>
</div>
.n2-5 p:nth-of-type(n+3) {
  color: red;
}
.n2-5 p:nth-of-type(-n+2) {
  color: green;
}

そこで要素が複合的な場合はnth-of-typeを使用します。2番目以下の要素と3番目以降の要素にスタイルが当たりました。