あるクラスがない子要素の中で最初の子要素をセレクターで指定したい（E:not(.class):nth-of-type(n)）

Question

#あるクラスが付いていない子要素の中で最初の要素をセレクターで指定したい

<ul>
 <li class="bg-blue hidden"></li>
 <li class="bg-blue"></li>
 <li class="bg-blue hidden"></li>
 <li class="bg-blue"></li>
 <li class="bg-blue"></li>
</ul>

.hidden {
 display: none !important;
}

ul li:not(.hidden):nth-of-type(1) {
 background: blue;
}

ul li:not(.hidden):nth-of-type(3) {
 background: blue;
}

実現したいこと

hiddenクラスがないli要素の中で最初のli要素にcssをあてたい

上記のcssだと「最初にあるli要素」判定が先になり、実現したいことができないため
他のやり方で実現したいことがCSSの範囲でできるかを教えていただきたいです。

E:not(.class):nth-of-type(n)
イメージでは上記のような形で実現したいのですが、、、

よろしくお願いします。

Answer 1

現在のCSSでは出来ないと思います。
Selectors Level 4 の :nth-match() では出来ると思いますが、今のところはChrome/Firefoxでも実装されていないようです。（デベロッパーリリース的なものでは未確認です）

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

【CSS4-Selectors » CSS4 » Structural pseudo-class】
http://css4-selectors.com/selector/css4/structural-pseudo-class/

【Selectors Level 4】
https://www.w3.org/TR/selectors4/

Comments

[ToruMatsuda]

ご回答ありがとうございます。
やはり現在のCSSでは不可能なようですね、、
Selectors Level 4を覗かせていただきます。