28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'essai de me mettre au clair avec le poids des sélecteurs CSS2.1 et CSS3, mais j'ai quelques doutes.
Sur le site du W3C, il est écrit que les pseudo-elements ont le même poids que les éléments (http://www.w3.org/TR/selectors/#specificity).

J'ai fait un test avec le HTML/CSS suivant :

HTML
<p class="para" id="parag">Paragraphe 1</p>


CSS

:first-letter,
::first-letter {color: silver}
:first-line,
::first-line {color: green}

p {color:orange !important}

#parag {color: yellow}
		
.para,
[class],
[class="para"],
:first-child,
:nth-child(1),
:nth-of-type(odd),
:nth-of-type(1) {color: lime}
		
p {color:aqua}
		
* {color:red}


Dans cet exemple, le sélecteur le plus haut écrase toujours celui du dessous. Tout fonctionne donc logiquement sauf les pseudo-elements :first-letter et :first-line qui s'appliquent même placés avant le !important.
Je pense qu'il y a une explication toute bête, mais je ne vois pas... Qu'en pensez-vous ?
Modifié par dgilz (25 Jan 2012 - 09:15)
Bon, je n'ai pas trouvé de véritable réponse, mais voici ce qui me semble logique :

le W3C explique (http://www.w3.org/TR/CSS2/selector.html#first-letter) que la déclaration

p:first-letter {color:red}

appliquée au html

<p>Paragraphe 1</p>

fonctionne comme si on ajoutait une balise supplémentaire, le code pourrait alors être interprété ainsi :

<p><p:first-letter>P</p:first-letter>aragraphe 1</p>


Du coup, il parait logique que la déclaration appliquée à l'élément <p:first-letter> soit prise en compte avant celles appliquées à l'élément <p> !

Ce qui m'étonne, c'est que je n'ai trouvé cette information nulle part. Le W3C mets tous les pseudo-elements au même niveau quand il est question de spécificité des sélecteurs, et le site W3Schools (http://www.w3schools.com/css/css_pseudo_elements.asp) liste :first-letter et :first-line parmi les pseudo-classes. Je pense que la confusion est encore grande entre les pseudo-elements et le pseudo-classes.
Je clos ce sujet, mais si vous avez plus d'informations à l'avenir, n'hésitez pas à les ajouter merci Smiley cligne