Discussion :

[MattP94]

Bonjour à tous !

Je n’arrive pas à bien comprendre les ordres de priorité sur les sélecteurs CSS. Il semble que les id soient plus importants que les classes qui sont de leur côté plus importantes que les noms de balise. Dans l'exemple ci-dessous, je m'amuse à mettre tous les liens <a> contenus dans <p id="para"> en rouge, puis de mettre un autre lien <a id="newa"> contenu dans <p id="para"> en vert. Malheureusement ça ne marche pas, contrairement à ce que mentionne la règle précédente. Pourriez-vous m'éclaircir ?

D'avance, merci.

MattP94

http://jsfiddle.net/xHbMj/2/

ou

Code html :

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

1
2
3
4
5
<p id="para">
    <a href="#">Rouge !</a>
    <a href="#">Rouge !</a>
    <a href="#" id="newa">Vert !</a>
</p>

Code :

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

1
2
3
4
5
6
7
8
9
#para a
{
    color: red;
}
 
#newa
{
    color: green;
}

[kOrt3x]

Comme ça, ça fonctionne :

Code CSS :

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

1
2
3
4
5
6
7
8
9
#para a
{
    color: red;
}
 
#para a#newa
{
    color: green;
}

[MattP94]

Merci beaucoup kOrt3x, je retiens la méthode !

Mais saurais-tu me dire où se situe l'ambiguîté pour le navigateur ? Est-ce une simple erreur de débutant ?

D'avance, merci.

[rodolphebrd]

Bonjour,

la règle est peu compliquée et vous l'avez comprise.
...Et votre exemple est simple.

Dans les deux cas vous ciblez l'élément A mais avec des sélecteurs de poids différents.
Il est donc naturel que le sélecteur dont le poids est plus important l'emporte.
#para a l'emportera donc sur #newa.

Une petite illustration vaut mieux qu'une longue explication fastidieuse.

[MattP94]

D'accord, ça me semble clair !

Merci beaucoup pour vos réponses.

MattP94