Discussion :

[droubaud]

Bonjour tout le monde,

J'ai un problème de priorités de styles auquel je suis incapable de trouver une explication :

- Je crée un site en utilisant Bootstrap et sa feuille de style standard bootstrap.css. Celle-ci définit bien sur un style pour l'élément <a> et ses :hover et :focus

- Pour tout ce que je veux personnaliser, j'ai ensuite créé une feuille DRo_personnalisation_bootstrap.css. Elle comprend entre autres les styles pour les éléments et classes suivants :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
a {
  color: #279EDF; /* liens en bleu */
  text-decoration: none;
}
a:hover,
a:focus {
  color: #279EDF; /* liens actifs ou avec focus en bleu soulignés */
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
 
.texte-blanc {
  color: #ffffff; /*couleur de texte : blanc */
}
 
a.texte-blanc:hover,
a.texte-blanc:focus {
  color: #ffffff!important; /*couleur de texte : blanc */
}

Dans la page HTML, le code se présente ainsi (il s'agit d'une vue Twig sous Symfony, d'où les {{asset) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<link rel="stylesheet" href="{{asset('css/bootstrap.css') }}" type="text/css" />
<link rel="stylesheet" href="{{asset('css/DRo_personnalisation_bootstrap.css') }}" type="text/css" />
...
<a class="texte-blanc" href="{{ path('roubaud_voice_index', { '_locale' : _locale}) }}">
    <span class="glyphicon glyphicon-headphones" aria-hidden="true"></span> {{ 'Voix Off'|trans }} 
</a>

Quand on passe au rendu dans le navigateur, le lien "Voix off" est bien de couleur blanche (style apporté par la classe .texte-blanc), mais en :hover ou :focus, c'est la couleur #279EDF apportée par le style <a> de DRo_personnalisation_bootstrap.css qui s'impose en priorité, alors que je souhaite que ce soit celui du a.texte-blanc:hover.

Mais si en revanche je place la déclaration de classe .texte-blanc et son a.texte-blanc:hover dans bootstrap.css au lieu de DRo_personnalisation_bootstrap.css, j'aurais bien un lien survolé en blanc. Tout cela est confirmé à l'inspection de l'élément concerné dans le navigateur.

Quelqu'un a t-il une explication ? Mon but est de ne surtout rien modifier dans boostrap.css, et de mettre toute forme de personnalisation dans DRo_personnalisation_bootstrap.css.

Merci par avance
David

[NoSmoking]

Bonjour,
tu es en présence d'un conflit lié au spécificité des sélecteurs.
A lire Règles d'application des styles CSS et gestion des conflits et surtout le §III. La spécificité.

Documentation officielle : Calculating a selector's specificity.

[droubaud]

Merci no smoking pour cette piste d'analyse.

Hélas, si je calcule bien, mon sélecteur a.texte-blanc:hover, a.texte-blanc:focus devrait peser 042, soit plus que les a:hover, a:focus (=022) de la première ou de la deuxième feuille.

Aussi, je ne m'explique toujours pas pourquoi placé en fin de première feuille le a.texte-blanc:hover, a.texte-blanc:focus s'applique en supplantant le a:hover, a:focus de la deuxième feuille, mais que quelle que soit sa place dans la deuxième feuille il ne soit pas pris en compte.

Mais j'ai peut-être mal calculé mes poids ?

[NoSmoking]

Mais j'ai peut-être mal calculé mes poids ?

pas exactement, il n'y a pas d'addition des différentes spécificités.

A spécificité égale c'est la dernière rencontrée qui sera appliquée

Considérons le HTML suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="lien" href="#">Lien</a>

avec ce CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
a:hover {      /* 0-0-1-1 */
  color:#F00;
}
a:hover {      /* 0-0-1-1 */
  color:#0F0;
}

le lien au survol sera vert, la dernière écrasant la précédente.

Maintenant si on ajoute au CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a.lien:hover { /* 0-0-2-1 */
  color:#888;
}

quelque soit l'endroit où cela sera ajouté, début/fin de la déclaration des styles, le lien sera toujours gris.