28106 sujets

CSS et mise en forme, CSS3

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)
Désolé d'avoir pollué le forum avec ce sujet dont j'ai fini par trouver la solution. Malheureusement, je n'ai pas la possibilité de le supprimer apparemment.

Quelques explications :

Mon code était évidemment plus complexe que celui présenté dans l'exemple (plus d'imbrications, noms de classes plus "réalistes"…) Et justement, mon problème venait de là. Entre mon "truc-toto" et "titi" j'avais un div "truc-tutu" qui forcément répondait "OK" à la règle :
[class*="truc-"]:not(.tata)


!!

Smiley confused
Meilleure solution