Poids des sélecteurs

Bonjour à tous

Pour vous expliquer ma situation, j’étudie le css personnellement à partir de livres écrits par raphael Goetter. J’ai lu CSS2.1 et j’en suis à CSS avancés.

Je vous sollicite car je bute à un endroit, c’est (page 32) lorsque il parle du poids des sélecteurs :

Voici le code de son exemple :
Partie Html

<div id="warning">
<a class="error" href="url">source de l'erreur</a>
</div>

partie CSS

a {color: green;}
#warning a{color: blue;}
a.error {color:red;}

Pour que le lien soit en rouge, il propose (si j’ai bien compris) d’écrire pour la partie CSS :

a {color: green;}
#warning a{color: blue;}
#warning a.error {color:red;}

J’ai vérifié, ca marche.
J’ai retrouvé l’explication sans le livre CSS 2.1 de Raphael dans la sélection hiérarchique...

J’ai néanmoins des questions à vous poser
1. est-ce que l’on peut imbriquer
#1#2#3 ……a.error{ color :blue}
à l’infini ?
2. est ce que l’imbrication déclarée dans le feuillet CSS doit correspondre à l’arborescence exacte déclarée dans la partie html ?

3. savez-vous ou je peux trouver des ressources pour me documenter sur cette question ?

En vous remerciant pour votre aide,

Cdlt,

Z.

Je n'ai pas compris la première question.. Pour ce qui est de la seconde, l'arborescence n'a aucune importance, ça marchera où que tu mettes tes sélecteurs. Bien qu'à ce sujet, il est recommandé de commencer par les plus génériques. (*, a, p et j'en passe..) Mais sinon, oui tu mets ce que tu veux où tu veux dans ta feuille de style. Si tu travailles avec des gens, surtout essaie d'organiser le mieux possible tes feuilles de style, c'est très dur de s'y retrouver lorsque les sélecteurs sont balancés à droite et à gauche, sans réelle hiérarchie..
Modifié par Knozelfhoegtj (07 Aug 2012 - 16:01)

bonjour,

pour ce qui est des selecteurs, il faut-être le moins bavard possible , mais efficace .

tu peux faire a# b# c# ... .error, si cela correspond à ta structure et que tu veut que ton sélecteur est un poids très important ... à propos, il y a aussi le !important pour écraser sans vergogne presque tout les sélecteurs de poids fort ou pas.

A multiplier les sélecteurs , tu alourdit aussi le process de traitement de ta feuille de style par le navigateur , qui pour appliquer les style, commence par le dernier , .error dans ton exemple, puis remonte .

Pour en savoir plus :
http://openweb.eu.org/articles/cascade_css/
http://openweb.eu.org/articles/performances_sites_internet (voir coté CSS et le reste aussi : ) )
http://openweb.eu.org/articles/integrateur-au-developpeur-front-end-un-maillon-essentiel-qualite-web

++

Knozelfhoegtj a écrit :
Je n'ai pas compris la première question.. Pour ce qui est de la seconde, l'arborescence n'a aucune importance, ça marchera où que tu mettes tes sélecteurs. Bien qu'à ce sujet, il est recommandé de commencer par les plus génériques. (*, a, p et j'en passe..) Mais sinon, oui tu mets ce que tu veux où tu veux dans ta feuille de style. Si tu travailles avec des gens, surtout essaie d'organiser le mieux possible tes feuilles de style, c'est très dur de s'y retrouver lorsque les sélecteurs sont balancés à droite et à gauche, sans réelle hiérarchie..

Bonjour,

Gc nomade a compris ce que je voulais dire par la première question.
J'ai eu donc la réponse à ma question : c'est possible , mais il faut l'utiliser qu'en cas de nécessité.

Ok pour ton explication claire.

Merci,

Cdlt

gc-nomade a écrit :
bonjour,

pour ce qui est des selecteurs, il faut-être le moins bavard possible , mais efficace .

tu peux faire a# b# c# ... .error, si cela correspond à ta structure et que tu veut que ton sélecteur est un poids très important ... à propos, il y a aussi le !important pour écraser sans vergogne presque tout les sélecteurs de poids fort ou pas.

A multiplier les sélecteurs , tu alourdit aussi le process de traitement de ta feuille de style par le navigateur , qui pour appliquer les style, commence par le dernier , .error dans ton exemple, puis remonte .

Pour en savoir plus :
http://openweb.eu.org/articles/cascade_css/
http://openweb.eu.org/articles/performances_sites_internet (voir coté CSS et le reste aussi : ) )
http://openweb.eu.org/articles/integrateur-au-developpeur-front-end-un-maillon-essentiel-qualite-web

++

Oui, être efficace dans les sélecteurs.
C'est clairement ce qu'il y a d'expliquer dans les liens que tu as posté.
Notamment, "Pensez à utiliser autant que possible des sélecteurs efficaces. Par exemple : #bandeau a au lieu de #bandeau ul#navigation li a"

C'est clair ainsi,

Merci.