1. ホーム
  2. css

[解決済み】CSSセレクタ - 与えられた子要素を持つ要素【重複あり

2022-04-15 21:13:35

質問

特定の子要素を持つ場合に、すべての要素を選択するセレクタを作りたいと考えています。例えば、すべての <div> を子として持つ <span> .

可能ですか?

解決方法は?

<ブロッククオート

特定の子要素を含む場合に、その要素を選択することは可能ですか?

残念ながらまだありません。

CSS2 CSS3 セレクタの仕様では、親を選択することはできません。


仕様変更に関する注意点

ここから先は、この記事の正確さについての免責事項です。CSSの親セレクタについては、長年にわたって議論がなされてきました。コンセンサスが得られていないため、変更が繰り返されています。私はこの回答を最新のものにするよう努めますが、次の点に注意してください。 仕様の変更により、不正確な情報が含まれている可能性があります。 .


古いもの "セレクタレベル4作業草案"。 を指定する機能であることが説明されています。 セレクタの件名 . この機能は廃止され、CSSの実装では使用できなくなりました .

subjectはセレクタチェーンの中でスタイルが適用される要素になる予定でした。

<サブ HTMLの例
<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>

このセレクタは span 要素

p span {
    color: red;
}

このセレクタは p 要素

!p span {
    color: red;
}


最近のもの "セレクタズレベル4エディターズドラフト" は、"Relational Pseudo-classを含んでいます。 :has() "。

:has() は、作者がその内容に基づいて要素を選択することを可能にします。私の理解では、これは jQueryのカスタム :has() 擬似セレクタ*です。

いずれにせよ、上の例の続きで p 要素を含む span を使うことができます。

p:has(span) {
    color: red;
}


<サブ * もし、jQueryがセレクタのサブジェクトを実装していたら、サブジェクトは仕様に残っていたのだろうかと考えさせられます。