CSSセレクタで要素数が奇数/偶数個の時の先頭/末尾を指定

概要

code:css

/*　要素が奇数個の時の先頭、言い換えると、「最後から奇数番目 かつ 最初の要素」 */

div:nth-last-child(odd):first-child { }

/*　要素が奇数個の時の末尾、言い換えると、「最後が奇数番目」 */

div:nth-child(odd):last-child { }

/*　要素が偶数個の時の先頭、言い換えると、「最後から偶数番目 かつ 最初の要素」 */

div:nth-last-child(even):first-child { }

/*　要素が偶数個の時の末尾、言い換えると、「最後が偶数番目」 */

div:nth-child(even):last-child { }

例

下図のように、偶数個・奇数個それぞれの先頭・終端にCSSスタイルを適用できる

https://gyazo.com/7227b2ad477e0316bba6e5c0359879b1

code:html

<h1>偶数個</h1>

<div class="container">

<div>1</div><div>2</div>

<div>3</div><div>4</div>

<div>5</div><div>6</div>

</div>

<h1>奇数個</h1>

<div class="container">

<div>1</div><div>2</div>

<div>3</div><div>4</div>

<div>5</div>

</div>

code:css

.container {

display: flex;

flex-wrap: wrap;

width: 200px;

}

.container > div {

width: calc(100px - 1px *2); /* 外線の太さ分を幅から減らす */

height: 20px;

}

/*　要素が奇数個の時の先頭 == 最後から奇数番目 かつ 最初の要素 */

.container > div:nth-last-child(odd):first-child {

background-color: red;

}

/*　要素が奇数個の時の末尾 == 最後が奇数番目 */

.container > div:nth-child(odd):last-child {

background-color: green;

}

/*　要素が偶数個の時の先頭 == 最後から偶数番目 かつ 最初の要素 */

.container > div:nth-last-child(even):first-child {

background-color: blue;

}

/*　要素が偶数個の時の末尾 == 最後が偶数番目 */

.container > div:nth-child(even):last-child {

background-color: yellow;

}

具体例: 何が嬉しいか？

モバイル環境で奇数個の時だけ要素で埋める、といった実装を動的に実現できる

https://gyazo.com/8638a396ea7a51428d04952d484f2191