実現したいこと
現在、設問項目が動的に表示/非表示で切り替わるフォームを作成しています。
そこで、以下のような状況が発生し得るのですが、できれば「.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>
発生している問題・分からないこと
最初は簡単そうに思いましたが、いざやってみると全然うまくいかずに困っています。
該当のソースコード
特になし
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
.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}
ですが、コーディングが冗長に見えます。もっと簡潔に記述する方法があれば教えていただきたいです。
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/05/01 03:05
2024/05/01 03:45 編集
2024/05/01 04:52
2024/05/01 04:57
2024/05/01 05:20
2024/05/03 02:22