偶数、奇数や、〇番目の要素だけ適用するCSS

「nth-child」は、偶数や奇数にくる要素や、何番目の要素に～したい、というようなCSSを適用させたいときに使える疑似クラスです。

セレクタに使えるHTMLの要素やクラス名、id名を指定して何番目を指定したいかを（）に記述します。

例：下記のようなHTMLがあるとします。

<ul>
    <li>１番目のリストアイテム</li>
    <li>２番目のリストアイテム</li>
    <li>３番目のリストアイテム</li>
    <li>４番目のリストアイテム</li>
    <li>５番目のリストアイテム</li>
    <li>６番目のリストアイテム</li>
    <li>７番目のリストアイテム</li>
</ul>

キーワードによる指定方法

英語で偶数を意味する「even」

英語で奇数を意味する「odd」

li:nth-child(even){
    background-color: coral;
}

を記述して指定ができます。

整数による指定方法

li:nth-child(3){
    background-color: coral;
}

（）の中に例えば3を指定すると3行目が変わります。

式による指定方法

さらに「n」を使って計算式によりCSSを適用させることが可能です。

なお「n」はNumberの略になります。

例えば

li:nth-child(2n)であれば2の倍数（2,4,6,8・・）番目の要素に反映されますし、 li:nth-child(3n+1)であれば（1,4,7,10・・・）番目の要素に反映されるようになります。