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

Question

実現したいこと

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

<ul class="items">
<li class="item hidden">①</li>
<li class="item">②</li>
<li class="item">③</li>
<li class="item">④</li>
<li class="item">⑤</li>
</ul>

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

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

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

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

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

補足

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

.items {
border-top: solid 1px black;

&:first-child,
&:first-child.hidden+* {
border-top: none !important;
}

&.hidden {
display: none;
}
}

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

Answer 1

:nth-child( ... of <selector> ) がいいかと思います。

The of <selector> syntax | :nth-child() - CSS: Cascading Style Sheets | MDN

:nth-child() の "of S" 構文が最強な件について #CSS - Qiita

Comments

[KentaroxKondo]

ご回答いただきまして、ありがとうございます！
他の方にも同じ返信を送信したのですが、上記の方法を採用して、現在別の問題が起こっています（以下）。

------------------------------
試しに、SASSで以下を実行してみました。

item: {
&:nth-child(1 of :not(.hidden)) {
background-color: green;
}
}

すると、確かに.hiddenを持たない.itemの最初の要素に対して、背景色が指定されていることを確認いたしました。

しかし、新たな問題が同時に起こりまして、（事前に説明していませんでしたが）今回の.hiddenというクラスは、ページを更新した際にJavaScriptで動的に付与しているクラスになります。

このように、動的にJavaScriptで①番目の要素に対して.hiddenを割り当てると、本当はそれに従って②に背景色が適用されてほしいのですが、適用されない問題が起きています。

検証ツールで②の要素を選択すると、確かに:nth-child(1 of :not(.hidden))によってbackground-color: green;が指定されているのですが、プロパティ左横のチェックマークをつけ外ししなければ、なぜか背景色が適用されないという挙動でした。

今まで、このような動きは見たことがありません。もしかするとブラウザ側のバグでしょうかね・・・？それとも、私の記述方法に誤りがあるのでしょうか。余計なスタイルの上書きは存在しないことを確認しています。

[Lhankor_Mhy]

item: { → .item {
ですよね？

当方でコードを書いてみましたが、問題を確認できませんでした。ご提示いただいていない部分に原因があると思われます。あるいは、環境の問題かもしれません。

[KentaroxKondo]

失礼しました、そのようにコーディングしていました！

[KentaroxKondo]

また、追加検証も行なっていただきありがとうございます。私の方では、Google Chromeだと問題が起きて、Safariだと問題が起きないことを確認しました。
Chromeだと、検証ツールを開くと狙っている通りのターゲットにスタイルが適用されているようなのですが、その検証ツール＞プロパティ左横のチェックマークをつけ外しして初めて背景色が適用されます。
さらに、ブラウザの幅を一瞬でも変化させると、その瞬間にスタイルが適用されました。

Safariではページを開いた瞬間から全く問題が起きず意図した挙動になっているので、ブラウザの差異による何かしらの問題があるかもしれません。

概ねコーディングは間違っていないことが分かりましたので、ブラウザのトラブルシューティングやアップデートにより事象が改善するまでは、ひとまず【補足】に記した別解でやり過ごしたいと思います。問題が解決した際には、教えていただいたよりスマートな書き方を採用させていただこうと思いました。

わざわざ教えていただきまして、ありがとうございました！

[Lhankor_Mhy]

以下のサンプルを当方でChromeで試してみましたが、問題は起きないようでした。
https://jsfiddle.net/Lhankor_Mhy/7e8b5mdp/

そちらの環境ではいかがですか？

[KentaroxKondo]

サンプル作成、ありがとうございます！Chromeで開いていますが、問題はないようです。私のプログラムですと、itemが最初にすべてPHPで描画されて、それからJavaScriptで（JSONファイルで設定されたルールに基づき）表示・非表示の判定を下し、適宜.hiddenを付与する挙動です。ページを読み込んだ際と、フォームに入力を行ったchangeイベントのタイミングで同じ処理が何度も発火するような設計にしています。

1番目の要素が非表示対象の場合は、ページ読み込み時に一瞬だけ表示されて消えるという挙動なのですが、もしかするとこれがいけないのですかね。この動きになっても、Chromeの検証ツールではしっかりと表示状態の1番目を対象にスタイルが当たっているのですが、ブラウザ画面ではやはりウィンドウ幅を変えるなどのトリガーがないとそれが適用されません。Safariでは全く問題ないです。動的に複雑なことをしようとしていることが、予期しないエラーを招いている可能性もありますかね・・・すみません

Answer 2

こういうことでしょうか？

<style>
:nth-child(1 of .item:not(.hidden)){
color:red;
}
:nth-child(n+2 of .item:not(.hidden)){
  background-Color:gray;
}
</style>

<ul class="items">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>

<ul class="items">
<li class="item hidden">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>

<ul class="items">
<li class="item hidden">1</li>
<li class="item">2</li>
<li class="item hidden">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>

動的なhiddenのつけ外し

<style>
:nth-child(1 of .item:not(.hidden)){
color:red;
}
:nth-child(n+2 of .item:not(.hidden)){
  background-Color:gray;
}
.hidden{
display:none;
}
</style>
<script>
document.addEventListener('change',({target})=>{
  if(target.matches('[data-target]')){
    console.log(document.querySelector(target.dataset.target));
    document.querySelector(target.dataset.target).classList.toggle('hidden',target.checked);
  }
});
</script>
hidden:
<label><input type="checkbox" data-target="#item1">1</label>
<label><input type="checkbox" data-target="#item2">2</label>
<label><input type="checkbox" data-target="#item3">3</label>
<label><input type="checkbox" data-target="#item4">4</label>
<label><input type="checkbox" data-target="#item5">5</label>

<ul class="items">
<li class="item" id="item1">1</li>
<li class="item" id="item2">2</li>
<li class="item" id="item3">3</li>
<li class="item" id="item4">4</li>
<li class="item" id="item5">5</li>
</ul>

確認

• codepen - YzMbYjb

Comments

[KentaroxKondo]

ご丁寧にソースコードを共有いただきまして、ありがとうございます！

試しに、SASSで以下を実行してみました。

item: {
&:nth-child(1 of :not(.hidden)) {
background-color: green;
}
}

すると、確かに.hiddenを持たない.itemの最初の要素に対して、背景色が指定されていることを確認いたしました。

しかし、新たな問題が同時に起こりまして、（事前に説明していませんでしたが）今回の.hiddenというクラスは、ページを更新した際にJavaScriptで動的に付与しているクラスになります。

このように、動的にJavaScriptで①番目の要素に対して.hiddenを割り当てると、本当はそれに従って②に背景色が適用されてほしいのですが、適用されない問題が起きています。

検証ツールで②の要素を選択すると、確かに:nth-child(1 of :not(.hidden))によってbackground-color: green;が指定されているのですが、プロパティ左横のチェックマークをつけ外ししなければ、なぜか背景色が適用されないという挙動でした。

今まで、このような動きは見たことがありません。もしかするとブラウザ側のバグでしょうかね・・・？それとも、私の記述方法に誤りがあるのでしょうか。余計なスタイルの上書きは存在しないことを確認しています。

[yambejp]

hiddenクラスのつけ外しを動的にするサンプルつけましたが特に問題ないと思いますが・・・
（一応hiddenクラスをつけると非表示にするように調整してあります）

[KentaroxKondo]

わざわざJavaScriptまで実装しテストいただきありがとうございます。

私の方も、再度確認してみましたが、やはり正常な挙動にはならないですね・・・
検証ツールを開くと、狙っている通りのターゲットにスタイルが指定されているのですが、背景色が適用されていない状況になります。
そこから、検証ツールのbackground-colorプロパティ左横のチェックマークをつけ外しすると、正常な挙動になります。
また、ブラウザの幅を少しでも変化させると、その瞬間に背景色が適用されるようになりますね。

一方で、全く同じコードをSafariでテストしてみると、最初から全く問題が起きず、完璧な挙動になります。ブラウザ間で差異が発生しているようですね・・・

ひとまず、コーディングは概ね正しいことがわかりましたので、ブラウザのトラブルシューティングやアップデートで改善するまでは、【補足】で追記した別解でやり過ごそうと思いました。とても勉強になる回答を、ありがとうございました！

[yambejp]

単純にSASSの書式がおかしいのでは？通常のCSSならいけると思います。
それとcodepenにSCSSでのパターンもあげておいたので確認ください

https://codepen.io/yambejp/pen/YzMbYjb

[KentaroxKondo]

codepenもありがとうございます。

私が書いたコードの、コンパイルされた後の状態（CSSの状態）を特定してみると、以下のようになっていました。

.contact-form__item:nth-child(n+2 of .contact-form__item:not(.hidden)) {
background-color: red;
}

やはり、記述自体は問題がないように思えます。それでも、Safariでは問題がなく、Chromeではブラウザ幅を少し動かすなどの操作をして初めてスタイルが適用されるおかしな挙動になっていますね〜。

.hiddenの次の.item要素を検証しても、background-color: redは適用されていませんが、画面上では背景色が赤くなっています。しかしブラウザ幅をいじるとその瞬間に背景色が消えて検証ツール上の情報通りの状態に整います。windowをリサイズするイベントなどは一切しておりません。

シークレットウィンドウでも同じ挙動でした（一部拡張機能はシークレットモードでも有効にしていますが・・・）。

SASSについては、:notの前に&を入れることもできるのですね。両方試しましたが結果は同じでした。今回の質問の趣旨とは異なる問題が起きていそうです汗

[yambejp]

提示された「.contact-form__item」と命題の「.item」の違いはどこからくるのでしょうか？
とりあえずSCSS/SASSをやめてCSSでご自身の環境で試すところからでしょう。

[KentaroxKondo]

混乱させてすみません、実際の環境では、BEMの命名法に則り「.contact-form__item」というクラス名を使用しています。冗長なので質問時は「.item」と略しましたが、完全互換することができます。

＞とりあえずSCSS/SASSをやめてCSSでご自身の環境で試すところからでしょう。
結局のところ、HTMLで読み込んでいるのは（コンパイルされた）cssファイルであり、そのcssファイルには恐らく問題がないであろう以下が記されています。実際に表示が適用されるまでにブラウザ幅を変えるなどのトリガーが必要なものの、検証ツール上の情報でも問題なく対象要素に指定がかかっています。

.クラス名:nth-child(n+2 of .クラス名:not(.hidden)) {
background-color: red;
}

この状況を切り抜ける方法がまだわかりませんが、あえてSCSSをやめてみるなど、試してみようと思います。ご回答ありがとうございました！