CSSの「:has()」で、特定の子要素の数を取得する方法

Question

実現したいこと

下記のような構造だとします

<div>
  <p></p>
  <span></span>
  <span></span>
</div>

例えば、divの子要素が3個以上あるかどうかを取得しようとした場合、div:has(> :nth-child(3))で取得できると思います

これをさらに、divの子要素のうちspanタグが2個以上あるかどうかを取得しようとした場合のやり方が分からず教えていただきたいです

Answer 1

条件：divの子要素のうちspanタグが2個以上あるか
は、正確には「divの直下の子要素のうちspanタグが2個以上あるか」ですよね？
ちなみに「:has()」はfirefoxが実装していないようなのであまりおすすめできません

div:has(> span ~ span){
background-Color:red;
}

Comments

[react_q3]

> 正確には「divの直下の子要素のうちspanタグが2個以上あるか」ですよね？

そうです🙇

ご回答のほどありがとうございます！

[Zuishin]

> ちなみに「:has()」はfirefoxが実装していないようなのであまりおすすめできません

JavaScript を使った方がいいですね。

Answer 2

この回答はGPT-4による自動生成回答です

CSSセレクタだけでは、子要素の特定のタグの数に基づいて要素を選択することはできません。JavaScriptを使用して、この条件に一致する要素を取得することができます。

以下のJavaScriptコードは、子要素のうちspanタグが2個以上あるdiv要素を取得します。

const divsWithTwoOrMoreSpans = Array.from(document.querySelectorAll('div')).filter(div => {
  const spanCount = div.querySelectorAll('span').length;
  return spanCount >= 2;
});

このコードでは、まずdiv要素をすべて取得し、それらを配列に変換します。次に、filter関数を使用して、子要素のspanタグの数が2個以上のdiv要素だけを取得します。

Comments

[yambejp]

相変わらずAIは平然と嘘をつくので怖いですね

[Zuishin]

どこが嘘なのかを書かなければ「個人的感想」以上の情報価値はありません。

コードが間違っているということですか？
それとも方針が間違っていますか？
間違っているとすれば、それはなぜで、それが間違っていることを示す根拠はどこにありますか？