【CSS】兄弟要素のうち、特定のクラスを持たない要素を対象に、最初の要素を取得したい

実現したいこと

現在、設問項目が動的に表示/非表示で切り替わるフォームを作成しています。
そこで、以下のような状況が発生し得るのですが、できれば「.hiddenを持たない.item(②〜⑤)」を対象に「最初の要素(②)」を取得して、それ以外の.item(③〜⑤)にスタイルを指定したいと考えています。

HTML

1<ul class="items"> 2<li class="item hidden">①</li> 3<li class="item">②</li> 4<li class="item">③</li> 5<li class="item">④</li> 6<li class="item">⑤</li> 7</ul>

発生している問題・分からないこと

最初は簡単そうに思いましたが、いざやってみると全然うまくいかずに困っています。

該当のソースコード

特になし

試したこと・調べたこと

上記の詳細・結果

.item:not(.hidden):not(first-of-type) {〜} →これだと、結局.hiddenを含む.itemも対象にfirst-of-typeが決定されてしまいました。

:hasなども使ってみましたが、結局思い通りの挙動にたどり着くことができず、藁をも縋る思いでこちらに質問させていただいた次第です。

補足

【追記】
実際にやりたいことは、表示状態にある.itemの最初のborder-topを無くしたいことだったのですが、以下のコーディングで期待している結果は得られました。

SASS

1.items {2border-top: solid 1px black;3 4&:first-child,5&:first-child.hidden+* {6border-top: none !important;7}8 9&.hidden {10display: none;11}12}

ですが、コーディングが冗長に見えます。もっと簡潔に記述する方法があれば教えていただきたいです。

コメントを投稿

0 コメント