[Résolu] Sélecteur d'attribut [] et :not(), enfant non concerné ?

Bonjour.

/!\ En faisant un codepen pour vous aider à tester, je vois qu'il n'y a pas de problème. il faut donc que je creuse…

J'ai un truc bizarre dans mes CSS que je n'arrive pas à m'expliquer. J'ai donc fait une recherche ailleurs et ici et je suis tombé sur ce fil https://forum.alsacreations.com/topic-4-84118-1-Pseudo-classe-de-negation-not.html . Malheureusement, il ne répond complètement au problème et je viens donc vous soumettre ce problème.

But : attendre un enfant .titi d'un parent .toto quand celui-ci n'a pas la classe .tata
Code HTML où CSS doit agir :

 <div class="truc-toto">
     <div class="titi"><div>
</div>

Code HTML où CSS ne doit pas agir :

 <div class="truc-toto tata">
     <div class="titi"><div>
</div>

Code CSS qui fonctionne comme attendu :

.truc-toto:not(.tata) {
            background: pink;
}
.truc-toto:not(.tata) .titi {
            background: red;
}

Dans ce cas, si je ne mets pas de "tata" j'ai du rose et du rouge et si je mets du "tata", je n'ai aucune couleur.

Code CSS qui ne fonctionne pas comme attendu :

[class*="truc-"]:not(.tata) {
            background: pink;
}
.truc-toto:not(.tata) .titi {
            background: red;
}

Dans ce cas, si je ne mets pas de "tata" j'ai du rose et du rouge et si je mets du "tata", je n'ai pas de rose, mais j'ai quand même du rouge !!

J'ai raté quelque chose ?
Modifié par Derwoed (16 Sep 2020 - 12:38)