Priorité des règles CSS

Bonjour,

J'essaie d'isoler au maximum le problème réel que je rencontre, et j'en arrive à la conclusion que quelque chose de très simple doit m'échapper dans le code suivant:

a:visited { color: red; }
.plop { color: green; }

<a class="plop" href="#">Bonjour</a>

Résultat une fois qu'on a bien visité le lien,

Sur firefox windows: c'est vert
Sur firefox mac: c'est rouge
Sur chrome windows: c'est vert
Sur chrome mac: c'est rouge
Sur safari mac: c'est vert

ON m'a aussi précisé que le problème n'est présent que depuis environ octobre 2016; avant quoi c'était vert partout.

Quelqu'un peut-il m'expliquer cette divergeance ? Je pensais pourtant que les moteurs de rendu entre la version mac et la version PC du même navigateur étaient les mêmes...

Quelle règle est censé être prioritaire d'après le standard ?


Mon souhait au final est que ce soit vert chez tout le monde; ça me paraît logique que la classe ait la priorité sur l'état visité.


Merci pour vos réponses.
Modifié par QuentinC (28 Mar 2017 - 22:56)

Bonjour Quentin,

J'ai moi aussi constaté qu'une balise en sélecteur prend un poids plus important lorsqu'on y appose un sélecteur lié à l'évènement (hover, focus etc).

Je ne sais ce qu'en disent les standards sur ce sujet et s'ils ont changés depuis, sachant que chaque navigateur fait de toute façon sa propre sauce mais pour ma part j'ai résolus le problème en précédent la directive prioritaire par :root (fonctionne pour tous sauf IE8-)

Ainsi

a:visited { color: red; }
:root .plop { color: green; }

rend les liens visités vert partout.


Bonne journée.

Selon le standard, les pseudo-classes (:visited) ont le même poids qu'une classe.

Quant à :visited, son application est dépendante des règlages d'historique et de vie privée du navigateur.

Hello,

kustolovic a écrit :
Selon le standard, les pseudo-classes (:visited) ont le même poids qu'une classe.

Je confirme que "a:visited" a plus de poids que ".plop" (voir ce calculateur par exemple : https://specificity.keegan.st/)

Par contre, la différence d'interprétation des navigateurs est intéressante. Peut-être est-ce spécifique à l'état :visited. As-tu testé avec d'autres états (:focus / :hover) ?

EDIT : :visited est effectivement un état un peu spécial ( https://www.alsacreations.com/actu/lire/1027-Unefaillesurlapseudo-classevisited.html )
Modifié par Raphael (29 Mar 2017 - 10:01)

Raphael a écrit :
Je confirme que "a:visited" a plus de poids que ".plop" (voir ce calculateur par exemple : https://specificity.keegan.st/)

Wow je savais pas que les pseudo classe et attribut comptait dans la colonne des classe ! (et merci pour le site il est trop cool !)

Du coup la solution serait d'augmenter le poid du second sélecteur ?

a:visited { color: red; }
a.plop { color: green; }

Bonsoir,

Merci pour vos réponses.

Excellente cette trouvaille de calculateur. Ca m'amène à une question sur ce petit outil: c'est quoi le premier chiffre ?

Sur la doc W3C mise en lien sur le calculateur, ils parlent de trois valeurs a,b,c:
a = ID
b = classe, attribut, pseudo-classe
c = élément

Il y a nulle part mention d'un quatrième chiffre dont la priorité surpasse toutes les autres...

Autre question sur la sélectivité tant qu'on y est: si j'écris:

.x, .y, .z

ça compte comme 030 ou bien c'est trois fois 010 complètement indépendantes ?

Pour en revenir plus précisément à mon problème, je ne peux pas renforcer le sélecteur en écrivant a.plop car je l'utilise potentiellement pour autre chose que des liens, je vais donc essayer la solution :root. J'ai 0.64% de IE<=8 dans mes stats donc c'est pas trop grave (j'ai quand même un perdu qui a réussi à venir avec IE 4.1.

C'est le'ffet du :visited que je cherche à neutraliser; d'ailleurs je pensais pas que les liens en question puissent être considérés comme visités, il s'agit d'actions JavaScript qui n'ouvrent jamais de nouvelle page.

Merci.

P.S. Le lien vers le calculateur est mauvais, la parenthèse a été prise dedans.

Salut !

QuentinC a écrit :
Ca m'amène à une question sur ce petit outil: c'est quoi le premier chiffre ?

C'est le style inline, c'est marqué dans le premier carré : https://specificity.keegan.st/ le style direct dans les balise html prend le dessus... Mais je te l'accorde c'est un peu hors sujet dans le calcul des priorités de sélecteur vu qu'on ne peut pas avoir les deux (si c'est inline, y'a pas de sélecteur). C’était juste pour garder en tete que ca override tout j'imagine.

QuentinC a écrit :
Autre question sur la sélectivité tant qu'on y est: si j'écris:

.x, .y, .z

ça compte comme 030 ou bien c'est trois fois 010 complètement indépendantes ?

Trois fois 10. Les virgules font des sélecteurs indépendants.

.x, .y, .z {}

c'est comme si tu écrivais :

.x {}
.y {}
.z {}

QuentinC a écrit :
Pour en revenir plus précisément à mon problème, je ne peux pas renforcer le sélecteur en écrivant a.plop car je l'utilise potentiellement pour autre chose que des liens, je vais donc essayer la solution :root. J'ai 0.64% de IE&lt;=8 dans mes stats donc c'est pas trop grave (j'ai quand même un perdu qui a réussi à venir avec IE 4.1..

a.plop {}

ou n'importe quoi d'autre hein !

body .plop {}

ca doit fonctionner aussi hein
Modifié par _laurent (30 Mar 2017 - 09:57)