Classe pseudo de négation CSS :not() pour les éléments parent/ancêtres

Question

Cela me rend fou :

HTML :

Hello World!

CSS :

*:not(div) h1 { color: #900; }

Est-ce que cela veut dire, "Sélectionner tous les éléments h1 qui ont un ancêtre qui n'est pas un élément div...?" Ainsi, "Hello World!" ne devrait pas être coloré en rouge, mais c'est le cas.

Pour le balisage ci-dessus, ajouter le combinateur enfant fonctionne :

*:not(div) > h1 { color: #900; }

Mais cela n'affecte pas l'élément h1 s'il n'est pas un enfant d'un élément div. Par exemple :

Hello World!

C'est pourquoi j'aimerais indiquer l'élément h1 comme un descendant, pas un enfant, de l'élément div. Quelqu'un ?

Answer 1

Cela ne se lit-il pas : "Sélectionner tous les éléments h1 qui ont un ancêtre qui n'est pas un élément div...?"

C'est le cas. Mais dans un document HTML typique, chaque h1 a au moins deux ancêtres qui ne sont pas des éléments div — et ces ancêtres ne sont autres que les éléments body et html.

C'est là le problème en essayant de filtrer les ancêtres en utilisant :not() : cela ne fonctionne tout simplement pas de manière fiable, surtout lorsque le :not() n'est pas qualifié par un autre sélecteur tel qu'un sélecteur de type ou un sélecteur de classe, par exemple .foo:not(div). Vous aurez beaucoup plus facile en appliquant simplement des styles à tous les éléments h1 et en les remplaçant par div h1.

Dans Selectors 4, :not() a été amélioré pour accepter des sélecteurs complexes complets contenant des combinateurs, y compris le combinateur descendant. Il reste à tester et confirmer si cela sera implémenté dans le profil rapide (et donc en CSS), mais une fois implémenté, vous pourrez l'utiliser pour exclure des éléments avec certains ancêtres. En raison de la manière dont les sélecteurs fonctionnent, la négation doit être effectuée sur l'élément lui-même et non sur l'ancêtre pour fonctionner de manière fiable, et donc la syntaxe sera un peu différente :

h1:not(div h1) { color: #900; }

Toute personne familière avec jQuery soulignera rapidement que ce sélecteur fonctionne dans jQuery aujourd'hui. C'est l'un des nombreuses disparités entre le :not() de Selector 3 et le :not() de jQuery, que Selector 4 vise à rectifier.

Answer 2

L'élément n'est pas un

. L'élément n'est pas un

.

Donc la condition "a un ancêtre qui n'est pas un

" sera vraie pour tous les éléments.

A moins que vous puissiez utiliser le sélecteur > (enfant), je ne pense pas que vous puissiez faire ce que vous essayez de faire - cela n'a pas vraiment de sens. Dans votre deuxième exemple,

n'est pas un div, donc cela correspond aussi à *:not(div).