CSSで:nth-of-typeが効かない場合の対処法を解説！
CSSでnth-of-typeが効かない場合の対処法を解説します。CSSでnth-of-typeが効かない場合の対処法のみならず、nth-of-typeの正しい使い方に関しても解説します。
CSSで:nth-of-typeが効かない問題
CSSで:nth-of-typeが効かない場合、nth-of-typeは.classを対象範囲としているわけではなく、Elementを対象範囲としているということを知らずに使用していることが挙げられます。
例えば上から2つ目のtarget2に赤色を設定したい時に以下のようなことが起きます。
実際にサンプルコードを用いて、挙動を見てみましょう。
このようにtargetクラスが複数あり、.targetに:nth-of-type(2)を設定したのに、2つ目ではなく、3つ目と4つ目にCSSが適用されていて、思い通りにいきません。
それは先ほど言った通り、:nth-of-typeはクラスセレクタを対象範囲としているわけではなく、Elementを対象範囲としているということを知らずに使用しているからです。
要するに.targetを対象範囲としているのではなく、div要素やp要素を対象範囲としているのです。
CSSで:nth-of-typeが効かない場合の対処法
ではCSSで:nth-of-typeが効かない場合の対処法について解説します。
例えば以下のようなHTMLを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="target-1">target1</div>
<p class="target-2">target2</p>
<div class="target-3">target3</div>
<p class="target-4">target4</p>
<div class="target-5">target5</div>
<p class="target-6">target6</p>
</body>
</html>このとき上から3つめのtarget3に赤色を設定したいとき、target3はクラスで数えると、他にはなく上から1つ目なので、.target-3:nth-of-type(1)と設定したとします。
この時にCSSで:nth-of-typeが効かないという問題が発生します。
ではどうしたらいいのか、実際にサンプルコードを用いて挙動を見てみましょう。
重要なので何度も言いますが、:nth-of-typeは.classを対象範囲としているわけではなく、Elementを対象範囲としているので、今回の場合target3クラスが与えられているdiv要素で数えると、上から2番目となります。
ですので、.target-3:nth-of-type(2)と設定する必要があるのです。
これで上から3つ目のtarget3に赤色を設定することができます。
:last-of-type、:first-of-type
:last-of-type、:first-of-typeもまた.classを対象範囲としているわけではなく、Elementを対象範囲としています。
:last-of-typeは兄弟要素のグループ内でその要素の一番最後の要素を指し、:first-of-typeはその要素の一番最初の要素を指します。
先程のHTMLの例を用いると、:last-of-type、:first-of-typeでは、target3にCSSで設定することは不可能です。
なぜかというとtarget3は一番最後でも最初でもなく、ちょうど間の2番目の要素に属するからです。ではサンプルコードを見てみましょう。
このように:last-of-typeは最後の要素であるtarget5とtarget6に、:first-of-typeは最初の要素であるtarget1とtarget2のみに設定することが可能です。
入れ子になっていいる場合
ここでは以下のようなHTMLを用います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrap-1">
<div class="target-1">target1</div>
<p class="target-2">target2</p>
<div class="target-3">target3</div>
<p class="target-4">target4</p>
<div class="target-5">target5</div>
<p class="target-6">target6</p>
</div>
<div class="wrap-2">
<div class="target-1">target1</div>
<p class="target-2">target2</p>
<div class="target-3">target3</div>
<p class="target-4">target4</p>
<div class="target-5">target5</div>
<p class="target-6">target6</p>
</div>
<div class="wrap-3">
<div class="target-1">target1</div>
<p class="target-2">target2</p>
<div class="target-3">target3</div>
<p class="target-4">target4</p>
<div class="target-5">target5</div>
<p class="target-6">target6</p>
</div>
</body>
</html>このとき.wrap-2クラスの2番目の要素であるtarget4にCSSを適用させる場合について解説します。
ではまずサンプルコードを用いて挙動を見てみましょう。
まずCSSを適用したい.wrap-2クラスの同じ階層にはdiv要素が3つあります。
このうちの.wrap-2クラスは2番目の要素に当たるので、.wrap-2:nth-of-type(2)とします。
そして.wrap-2クラスの中にはそれぞれ要素が3つずつ格納されています。
CSSを適用させたいtarget4は上から2番目の要素になるので、.target-4:nth-of-type(2)とします。
今回wrap-2クラスのtarget4にCSSを適用させたいので、これらを組み合わせて、.wrap-2:nth-of-type(2) .target-4:nth-of-type(2)にCSSを設定します。
まとめ
いかがでしたでしょうか？
:nth-of-typeは.classを対象範囲としているわけではなく、Elementを対象範囲としているという点は:nth-of-type、:first-of-type、:last-of-typeを用いる際、非常に重要です。
この点に留意して使用してください。
