28200 sujets

CSS et mise en forme, CSS3

[Résolu] Je galère avec :not

Salut,

J'ai un code CSS qui stylise les liens de mon site. Mais il y a des endroits où je ne voudrais pas que ce style soit appliqué.
Pour cela j'utilise (en tout cas j'essaie) la fonction :not. Mais il semble que je m'y prends mal... un coup de main ?

C'est la ligne body div:not(.noUnderline_link) a que j'essaie de faire fonctionner. Le reste marche bien

div.uicore-type-post a,
article.type-post .ui-e-post-content a,
body.page article a,
body div:not(.noUnderline_link) a
{color:#333333; text-decoration:none; display:inline-block; font-weight:500; padding:0 0 .25em;
  margin-left:0; position:relative; clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 
    &:before, &:after {position:absolute; content:''; border-bottom:2px solid #F7251C;
        border-radius:1em; bottom:.3em; transition:transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);}
    &:before {width:1em; transform-origin:left;}
    &:after {width:90%; left:1em; transform:translateX(110%);}
    &:hover:before {transform:scaleX(0.3);}
    &:hover:after {transform:translateX(0);}
}


un coup de main svp ?
Merci
Modérateur
Ok merci pour le lien. Pour que tout le monde raccroche les wagons je vais reproduire le problème ici :
<div>
  <div class="noUnderline_link">
    <a>test</a>
  </div>
</div>
<div class="noUnderline_link">
  <a>test</a>
</div>

div:not(.noUnderline_link) a {
  color: red;
}

https://jsfiddle.net/9kxa04fL/

Le premier est rouge, le second non, car dans le premier cas il y a bien une div parente du <a> qui ne porte pas la classe noUnderline_link. C'est pareil sur ton site, il y a une demi-douzaine de div sans cette classe qui englobe le <a> donc le sélecteur est validé.

On peut s'y prendre de plusieurs façons, mais dans ce cas précis et pour ne pas tout réécrire je te conseillerais peut etre plutôt d'overrider les propriétés que tu ne veux pas. exemple :
a {
  color: red;
}
.noUnderline_link a {
  color: black;
}

On empêche pas le CSS de s'appliquer, on vient le remettre comme on veut apres coup.

Bonne soirée !
Meilleure solution
Administrateur
Bonjour,

Si tu es certain que la classe qui doit être absente est sur le parent et non un autre ancêtre, il te faut ajouter le sélecteur parent. Et pas besoin de surqualifier ton selecteur (ajouter le nom de l'élément)
:not(.noUnderline_link) > a {
  text-decoration: none;
}


Je vais souvent préférer la manière de faire de _laurent ceci dit, à moins que :not() soit dans le contexte plus adapté, 0 risque toussa.
Modifié par Felipe (23 Jan 2025 - 15:43)
@Felipe : tu as oublié un point à "noUnderline".

edit par Felipe : Smiley good
Modifié par Felipe (23 Jan 2025 - 15:44)
Prévenir un modérateur
Répondre au sujet
Aller à