BLOG

ブログ

【CSS】何番目・奇数偶数・最後・最初など

CSSで、「何番目」や「奇数だけ」や「何番目から何番目まで」など、特定の要素を指定してスタイルを適応させることができます。
例えば、表組み（table）の奇数行に色を付けたいとか、ページ内のh2で2番目以降には上部余白を大きくとりたいなど。

割とよく使うCSSですが、コードを忘れその都度検索していたので備忘録。

目次

よく使うスタイル一覧

表示スタイル適応箇所nth-childnth-of-type
●●●●●最初:first-child:first-of-type
●●●●●最後:last-child:last-of-type
●●●●●奇数:nth-child(odd)
:nth-child(2n-1)		:nth-of-type(odd)
:nth-of-type(2n-1)
●●●●●偶数:nth-child(even)
:nth-child(2n)		:nth-of-type(even)
:nth-of-type(2n)
●●●●●最初から2番目:nth-child(2):nth-of-type(2)
●●●●●最後から4番目:nth-child(-n+4):nth-last-of-type(4)
●●●●●最初から3番目まで:nth-child(-n+3):nth-of-type(-n+3)
●●●●●最後から3番目まで:nth-last-child(-n+3):nth-last-of-type(-n+3)
●●●●●4番目以降:nth-child(n+4):nth-of-type(n+4)
●●●●●2番目以前:nth-last-child(n+2):nth-last-of-type(n+2)
●●●●●2の倍数:nth-child(2n):nth-of-type(2n)

「:nth-of-type(n)」と「:nth-child(n)」の違い

「:nth-of-type(n)」と「:nth-child(n)」は以下の状況で使い分けしています。

シンプルなHTMLの場合は、「:nth-child(n)」

見出しタグ（h2、h3など）が無く、HTMLがシンプルな構成な場合は「:nth-child(n)」を使います。

＜HTML例＞

<ul>
    <li>1番目</li>
    <li>2番目</li> ←色を赤変える
    <li>3番目</li>
    <li>4番目</li>
    <li>5番目</li>
</ul>

上記の2番目を赤色に変える場合

ul li:nth-child(2) {
    color: red;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
    •

となります。

親要素内に子要素が複数ある場合は、「:nth-child(n)」

親要素内に子要素が複数あり、見出しタグなどのタグが含まれているなどHTMLが複雑な構成の場合は「:nth-of-type(n)」を使います。

＜HTML例＞

<div>
    <h2>見出し1</h2>
    <p>1番目</p>
    <p>2番目</p> ←色を赤変える
    <p>3番目</p>
    <h2>見出し2</h2>
    <ul>
        <li>4番目</li>
        <li>5番目</li> ←色を赤変える
        <li>6番目</li>
    </ul>
    <h2>見出し3</h2>
    <span>7番目</span>
    <span>8番目</span> ←色を赤変える
    <span>9番目</span>
</div>

上記の2番目と5番目と8番目を赤色に変える場合

div p:nth-of-type(2),
div ul li:nth-of-type(2),
div span:nth-of-type(2) {
    color: red;
}
見出し1
1番目
2番目
3番目

見出し2
  • 4番目
  • 5番目
  • 6番目

見出し3
7番目
8番目
9番目

となります。

blog

PAGE TOP