Est-il possible de détecter la visibilité des éléments en CSS ?

Question

J'ai parcouru l'API à la recherche de pseudo-sélecteurs tels que :visible ou :hidden, mais j'ai été déçu de constater qu'aucun sélecteur de ce type n'existait. . Puisque jQuery prend en charge ces sélecteurs depuis un certain temps, j'espère qu'ils seront implémentés. Mon idée est que je souhaite afficher un élément spécifique uniquement lorsque l'élément à côté est masqué, mais je ne veux pas utiliser JavaScript pour ce faire. Y a-t-il des options ?

Answer 1

Cela dépend de ce que vous entendez par "à côté". Vous pouvez sélectionner des éléments par visibilité à l'aide du Attribute Selector. Ou choisissez ici :

Pour accéder à un élément par visibilité, vous pouvez utiliser par exemple l'astérisque du sélecteur d'attribut de correspondance de sous-chaîne [att*=val]。假设div的样式是使用visibility: hidden;Caché :

div[style*="hidden"] {

}

---

La question est maintenant de savoir comment accéder à l'élément "à côté". Si l'élément que vous essayez de cibler se trouve directement derrière un élément masqué (au sein du même parent), utilisez le sélecteur + :

div[style*="hidden"] + span {

}

Si c'est avant, vous ne pouvez rien y faire, mais vous pouvez chercher des solutions de contournement dans les réponses à cette question : Y a-t-il un sélecteur CSS "frère précédent" ?

Answer 2

Non, ce n'est pas possible, ni , du moins pas dans une feuille de style.

Sinon, vous créerez une boucle infinie :

element:visible {
  display: none;
}

L'élément est visible dans un premier temps, puis le sélecteur le sélectionne et le masque, puis le sélecteur ne s'applique pas, il redevient visible, et ainsi de suite.

Dans l'API JS, les sélecteurs de pseudo-classes sont autorisés, tels que querySelector. Mais pour autant que je sache, cela n’existe pas encore et il n’est pas possible de l’implémenter en utilisant uniquement CSS.