さんさろ

Webエンジニアの雑記&技術、たまにドイツ

CSSで、全要素が奇数個の場合の、最後の偶数番目の要素を指定する

疑似クラスを使って解決してみる

CSS で、要素が奇数個ある時の、最後の偶数番目の要素を指定したかったのです。

例えば、

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

で言う所の、6に CSS を指定したい。 PHP で判定させてクラスを付与するのでもいいんですけど、CSS の疑似クラス使ってなんとか頑張ってやれないなぁ、と。

最初はこうしてみた。

li:nth-child(2n):last-child {}

これでいけるかなーと思ったけど、last-child はホントに「最後の child」、なので、7しか判定してくれないみたい。最後が偶数ではないので、↑この指定は奇数個ある場合には何も指定出来ない。(偶数個だったら問題なく最後の要素を指定出来るけど。)

で、どうだったら指定出来たかというと、

li:nth-child(2n):nth-last-child(2) {}

これで、全部で奇数個ある場合の、最後の偶数番目の要素、ここで言う所の6を指定出来ました。

ちなみに、偶数個ある場合の、最後の奇数番目の要素を指定する場合は、こう。

li:nth-child(2n+1):nth-last-child(2) {}

見れば「なるほど、確かに」ですけど。ちょっとハマってしまいました。