CSS で要素の可視性を検出することはできますか?

Question

API を調べて、:visible や :hidden などの疑似セレクターを探しましたが、そのようなセレクターが存在しないことがわかりがっかりしました。 。 jQuery は以前からこれらのセレクターをサポートしているため、実装されることを期待しています。私の考えは、特定の要素の隣の要素が非表示になっているときにのみ特定の要素を表示したいということですが、そのために JavaScript を使用したくありません。オプションはありますか?

Answer 1

それは「隣」が何を意味するかによって異なります。 属性セレクターを使用して、可視性によって要素を選択できます。または、ここ:

から選択してください

可視性によって要素にアクセスするには、たとえば、部分文字列一致属性セレクター アスタリスク [att*=val] を使用できます。 div スタイルが visibility: hidden;:

を使用して非表示になっていると仮定します。 リーリー

---

ここでの問題は、「隣の」要素にアクセスする方法です。 ターゲットにしようとしている要素が非表示要素のすぐ後ろ (同じ親内) にある場合は、セレクターを使用します:

リーリー

以前の場合は、それについてできることは何もありませんが、この質問への回答でいくつかの回避策を探してください。 「前の兄弟」CSS セレクターはありますか?

Answer 2

いいえ、それは不可能です、それは不可能です、少なくともスタイルシートでは。

そうしないと、無限ループが作成されます:

リーリー

要素は最初は表示され、次にセレクターによって選択されて非表示になり、その後セレクターが適用されなくなり、再び表示されるというようになります。

JS API では、querySelector などの疑似クラス セレクターが許可されます。しかし、私の知る限りそのようなものはまだ存在せず、CSSのみを使用して実装することはできません。