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) {}
見れば「なるほど、確かに」ですけど。ちょっとハマってしまいました。