特定のclassをもつliの奇数偶数の振り分け

Question

CSSについてご質問させてください。

■実現したいこと

<ul> <li class="main"></li> ※1つ目 <li class="sub"></li> <li class="main"></li> ※2つ目 <li class="sub"></li> <li class="sub"></li> <li class="main"></li> ※3つ目 <li class="sub"></li> <li class="main"></li> ※4つ目 <li class="sub"></li> <li class="sub"></li> <li class="sub"></li> <li class="sub"></li> </ul>

という形でli.mainの間に不規則な個数のli.subが入ります。
この時1つ目のli.mainはodd、2つ目のli.mainはevenのような形で擬似セレクタでcssを分けたいのですが、
cssで可能な方法があればご教授いただきたいです。

現状、li.main:nth-child(even)やli.main:nth-of-type(even)では実装できないことは確認済みです。

宜しくお願い致します。

Answer 1

今はJavaScriptなどでがんばるしかありません。各ブラウザが「Selectors Level 4」に対応したら :nth-match がそれにあたると思います。

【CSS4セレクタ (Selectors Level 4) の新機能】
https://myakura.github.io/n/selectors4.html#nth-match-and-nth-last-match

【Selectors Level 4（CSS4セレクタ） - innov-staff-blog】
http://www.innov-i.co.jp/innov-staff-blog/2013/0611_200000.html

【次世代のCSS (CSS4) の現在の策定状況と気になった変更点・追加要素など | be-into】
http://be-into.com/blog/web/the-development-status-of-the-next-generation-of-css/

Comments

[tagu5959]

ありがとうございます。
:nth-matchは初めて知りました。
まだ検証段階なんですね。
jsで実装したいと思います。