CSSで〇番目、奇数番目、偶数番目などの指定をする
公開：2026.05.12
複数の要素の内、何番目かの要素、2番目・4番目…の要素または1番目・3番目…の要素だけ変更を加えたいときがあります。
そんなときは、「nth-of-type」もしくは「nth-child」などを使います。
例えば、下記のような場合です。
-
01タイトルが入ります。
01の項目の簡単な説明が入ります。 -
02タイトルが入ります。
02の項目の簡単な説明が入ります。 -
03タイトルが入ります。
03の項目の簡単な説明が入ります。 -
04タイトルが入ります。
03の項目の簡単な説明が入ります。 -
05タイトルが入ります。
03の項目の簡単な説明が入ります。
この例は、次のようなリスト形式のHTMLで作成しました。
このCSSの中にある「li:not(:last-of-type)」や「li:nth-of-type(odd)」などで、ulの中にある何番目のliかを指定しています。
以降、順番の指定方法について簡単にまとめていきますので、ご参考になりましたら幸いです。
<ul class="timeline-list-alternate">
<li>
<p class="timeline-list-title">01タイトルが入ります。</p>
01の項目の簡単な説明が入ります。
</li>
<li>
<p class="timeline-list-title">02タイトルが入ります。</p>
02の項目の簡単な説明が入ります。
</li>
<li>
<p class="timeline-list-title">03タイトルが入ります。</p>
03の項目の簡単な説明が入ります。
</li>
<li>
<p class="timeline-list-title">04タイトルが入ります。</p>
03の項目の簡単な説明が入ります。
</li>
<li>
<p class="timeline-list-title">05タイトルが入ります。</p>
03の項目の簡単な説明が入ります。
</li>
</ul>ul.timeline-list-alternate {
padding-left: 0;
margin: 0;
}
ul.timeline-list-alternate li {
list-style: none;
position: relative;
width: 50%;
}
ul.timeline-list-alternate li:not(:last-of-type) {
padding-bottom: 4rem;
}
ul.timeline-list-alternate li:not(:last-of-type)::before {
content: " ";
display: block;
position: absolute;
background-color: #000000;
width: 2px;
height: calc(100% - 1.4rem);
top: calc(1.5rem + 0.45em);
}
ul.timeline-list-alternate li::after {
content: " ";
display: block;
position: absolute;
background-color: #000000;
width: 1.6rem;
height: 1.6rem;
top: 0.45em;
}
ul.timeline-list-alternate li:nth-of-type(odd) {
padding-right: 4rem;
display: flex;
flex-direction: column;
align-items: flex-end;
}
ul.timeline-list-alternate li:nth-of-type(odd)::before {
right: -1px;
}
ul.timeline-list-alternate li:nth-of-type(odd)::after {
right: -0.8rem;
}
ul.timeline-list-alternate li:nth-of-type(even) {
margin-left: auto;
padding-left: 4rem;
}
ul.timeline-list-alternate li:nth-of-type(even)::before {
left: -1px;
}
ul.timeline-list-alternate li:nth-of-type(even)::after {
left: -0.8rem;
}
.timeline-list-title {
font-weight: 700;
font-size: 1.6rem;
margin-bottom: 1rem;
}ちなみに、こちらの左右交互に表示を変えているリストについて詳しくはこちら。
何番目か指定するnth-of-typeとnth-childの違いについて
はじめに、何番目の要素であるか指定する「nth-of-type」「nth-child」の違いについてです。
何が違うかというと、ある要素の中にある各要素の数え方が違います。
先ほどの例ではulの中のliの順番を指定していましたが、ここでは次のようなHTMLを例に説明します。
<div>
<p>1つめのpです。</p>
<p>2つめのpです。</p>
<div>
<p>divの中にある1つめのpです。</p>
<p>divの中にある2つめのpです。</p>
<p>divの中にある3つめのpです。</p>
</div>
<p>3つめのpです。</p>
<p>4つめのpです。</p>
</div>nth-of-type
まず「nth-of-type」の場合、ある要素の中の指定した要素だけを数えてくれます。
HTMLとCSSはこのようにしています。
<div class="explanation-nth-1">
<p>1つめのpです。</p>
<p>2つめのpです。</p>
<div>
<p>divの中にある1つめのpです。</p>
<p>divの中にある2つめのpです。</p>
<p>divの中にある3つめのpです。</p>
</div>
<p>3つめのpです。</p>
<p>4つめのpです。</p>
</div>.explanation-nth-1 p:nth-of-type(3) {
background-color: #fff;
}実際に表示したものがこちらです。
1つめのpです。
2つめのpです。
divの中にある1つめのpです。
divの中にある2つめのpです。
divの中にある3つめのpです。
3つめのpです。
4つめのpです。
「.explanation-nth-1」の中にある3番目のpタグを指定して、背景色を変更しました。
この場合、「.explanation-nth-1」の直下にある3番目のpタグの背景色を変更。
「.explanation-nth-1」の直下にあるdiv要素の子要素であるpタグは、直下のpタグとは別でカウントされます。
そのため、直下の3番目のpタグと、div要素の子要素である3番目のpタグの背景色も変わります。
子要素の中にあるpタグまで変更したくない場合は、「.explanation-nth-1>p:nth-of-type(3)」と指定してください。
nth-child
次に「nth-of-type」の場合、ある要素の中の全てを数えます。
HTMLとCSSはこのようにしています。
先ほどのように、3番目のpタグを指定しました。
<div class="explanation-nth-2">
<p>1つめのpです。</p>
<p>2つめのpです。</p>
<div>
<p>divの中にある1つめのpです。</p>
<p>divの中にある2つめのpです。</p>
<p>divの中にある3つめのpです。</p>
</div>
<p>3つめのpです。</p>
<p>4つめのpです。</p>
</div>.explanation-nth-2 p:nth-child(3) {
background-color: #fff;
}実際に表示したものがこちらです。
1つめのpです。
2つめのpです。
divの中にある1つめのpです。
divの中にある2つめのpです。
divの中にある3つめのpです。
3つめのpです。
4つめのpです。
先ほどと同じように3番目のpタグを指定しましたが、直下の3番目のpタグは背景色が変わっていません。
なぜかというと、「:nth-child(3)」の場合、「.explanation-nth-2」の中にある全ての要素を数えて指定するからです。pタグ、divタグを区別して数えてくれません。
この場合、直下の要素の中にある3番目の要素はdivタグです。
「3つめのpです。」と表示している要素は、「:nth-child(3)」で数えると4番目になってしまうため、背景色は変わりません。
直下のdiv要素の中にある「divの中にある3つめのpです。」は、そのdiv要素の中では3番目のpタグになるため、背景色が変わっています。
★ポイント
- nth-of-typeは、指定した要素だけを数えてくれる
- nth-childは、全ての要素を数える
ちょっとした違いですが、その違いで思っていた通りの表示にならないことがあります。
順番で指定する際は、しっかり覚えておきたいポイントです。
〇番目を指定
何番目の要素か、（）の中に数字を入れて指定します。
:nth-of-type(3){
}:nth-child(3) {
}何番目か自動判定してくれる
何番目か数字で指定しなくても、奇数・偶数・最初・最後を自動で判定して指定する方法があります。
奇数番目の要素を指定
1番目、3番目…と、奇数番目の要素を自動で判定して指定できます。
奇数番目を指定する場合、（）の中に「odd」と入力します。
:nth-of-type(odd){
}:nth-child(odd) {
}偶数番目の要素を指定
2番目、4番目…と、偶数番目の要素を自動で判定して指定できます。
偶数番目を指定する場合、（）の中に「even」と入力します。
:nth-of-type(even){
}:nth-child(even) {
}最初の要素を指定
何番目の要素…ではなく、「:first-of-type」「:first-child」で最初の要素という指定もできます。
:first-of-type{
}:first-child {
}最後の要素を指定
最後の要素を指定する場合は「:last-of-type」「:last-child」を使います。
:last-of-type{
}:last-child {
}その他の指定方法
私はあまり使ったことはないのですが、〇番目以降・最後から〇番目…といった指定方法もあります。
〇番目以降を指定
下記のように、（）の中で「（n+数字）」と指定すると、その数字番目以降の要素に対してCSSを設定できます。
この場合、2番目以降の要素を指定しています。
:nth-of-type(n+2){
}:nth-child(n+2) {
}最後から〇番目を指定
「:nth-of-type(3)」だと最初から3番目を指定しますが、それとは逆に最後から〇番目を指定することもできます。
最後から3番目の場合は、次のように指定します。
:nth-last-of-type(3){
}:nth-last-child(3) {
}最初から〇番目までを指定
最初から〇番目までの範囲を指定する場合は、次のような書き方になります。
（）の中で「（-n+数字）」と指定すると、その数字番目以降の要素に対してCSSを設定できます。
この「-」がないと〇番目以降を指定してしまうので、ご注意ください。
この場合、最初から2番目までの範囲を指定しています。
:nth-of-type(-n+2){
}:nth-child(-n+2) {
}まとめ
子要素の順番でCSSを設定する場合は、下記のような擬似クラスで設定できます。
- :nth-of-type()
- :nth-child()
- :nth-of-type(odd)
- :nth-child(odd)
- :nth-of-type(even)
- :nth-child(even)
- :first-of-type
- :first-child
- :last-of-type
- :last-child
- :nth-last-of-type()
- :nth-last-child()
同じ親要素の中の子要素の内、これだけは色を変えたいなどというときに毎回クラスを作るのも面倒なので、順番で指定できることを覚えておくと便利です。
ただ、後から子要素が増える可能性がある場合は要注意。
順番が変わると、違う要素にCSSがあたってしまいますのでご注意ください。
