Partie 5 - Introduction à CSS

Grouper les sélecteurs

Le sélecteur sont utilisés pour "sélectionner" les éléments d'une page à qui sont affecté des règles. Lorque plusieurs sélecteurs partagent les même déclarations, ils peuvent être regroupés ensemble pour éviter d'écrire la même règle plus d'une fois. Chaque sélecteur doit être séparé par une virgule. Ils peuvent aussi inclure une large gamme de sélecteurs. Par exemple :

h1, h2, h3, h4 { padding: 1em; }
.misenvaleur p, .misenvaleur ul { margin-left: .5em; }
#principal p, #principal ul { padding-top: 1em; }

Il y a deux erreurs communes que les gens font quand il groupent des sélecteurs. La première est l'oubli d'écrire chaque sélecteur en entier. Par exemple, si vous essayez de cibler deux éléments du même bloc conteneur qui ont le même "ID", vous essayerez probablement de les écrire de la même façon. Ainsi, ce qui suit est probablement faux :

#contenuprincipal p, ul { border-top: 1px solid #ddd; }

Le groupe correct de sélecteurs serait peut-être :

#contenuprincipal p, #contenuprincipal ul { padding-top: 1em; }

La deuxième erreur courante est de terminer le groupement par une virgule. A cause de cela, certains navigateurs risquent d'ignorer l'intégralité de la règle.

.emphase p, .emphase ul, { margin-left: .5em; }

Ressources externes :