En CSS nous reconnaissons les éléments à cible au travers des sélecteurs, nous allons explorer au cours de ce chapitre les divers éléments que nous avons à disposition.
Principe et utilisation
Les divers sélecteurs
Redéfinition de balise
Les sélecteurs les plus simples sont les redéfinitions de balises. Donc on peut créer par exemple, le sélecteur p { } pour redéfinir l'ensemble des balises <p> d'un document.
Il est également possible de définir une règle commune à deux balises, donc attribuer les mêmes définitions à deux balises, simplement en plaçant deux sélecteurs séparés par des virgules, par exemple toutes les balises <p> et <td> seront affectées par cette règle p, td { }.
Les classes
Bien que les sélecteurs couvrent un large spectre de possibilités, il se peut que certaines situations soient plus complexes à gérer, ou tout simplement, qu'il soit plus simple d'avoir recours à une règle générique réexploitable à souhait et dans de nombreuses situations.
Il est donc possible de mettre en place des règles sous forme de classe. Les classes sont simplement définies dans la feuille de style par un point. Le nom de la classe peut être n'importe quel mot qui soit significatif pour nous. Par exemple .prix ou encore .label_principal.
Du côté du code HTML, il suffit d'avoir recourt à l'attribut class="" pour les balises concernées. Cette fois-ci le nom de classe est indiqué sans le point comme <p class="prix">.
Quelques précautions sont quand même nécessaires. Tout d'abord, attention à la classite ! En effet, on a vite tendance à utiliser des classes pour tout et n'importe quoi et on va surcharger inutilement le contenu du site par des attibuts bien souvent superflus. Voir à ce sujet l'article CSS : classitis et divitis de Xavier Borderie sur JDN développeurs.
Une autre précaution non moins pernitieuse, est de ne pas utiliser des expressions trop explicites comme .mot_bleu, ou .bandeau_gauche... car si la classe ne changera pas de nom dans l'ensemble du site, la couleur du mot ou la position du bandeau, elle, le pourra et là cela deviendra assez complexe à maintenir ou à débogguer.
Les ID
Les sélecteurs imbriqués
Les pseudos classes
Le sélecteur universel
Les sélecteurs Child
Les sélecteurs d'attributs ou filtres
Les feuilles de styles en cascades
Le principe des cascades fait que plusieurs sélecteurs peuvent affecter un même élément. Qu'en est il des priorités et des précédences ?. Cette spécificité CSS est clairement décrite dans un document du w3c.
Les spécificités
Héritage
