Les sélecteurs Sélecteurs

Le CSS permet, pour sélectionner un élément précis, d’indiquer plus ou moins le chemin jusqu’à la balise à styliser.

#legende ul li img{ ... }

Cette écriture est le b-a-ba à connaître pour écrire une feuille de style. Mais les dernières évolutions du CSS ont mis à jour de nouvelles méthodes qui simplifient énormément le travail. S’il fallait, il y a encore peu, écrire quelques lignes de JavaScript, il est maintenant possible de faire une partie du travail en utilisant uniquement le CSS et en devenant expert sur les sélecteurs.

Les sélecteurs sont des symboles qui vont pouvoir se glisser dans la création d’un style pour donner des informations plus précises afin de sélectionner une balise et lui appliquer un style.

Prenons l’exemple d’une page qui contient dans sa zone principale trois <div>, trois blocs qui contiennent chacun du texte et une image.

Supposons que le style du div s’écrive :

#zonePrincipale div { ... }

Avec ce sélecteur, tous les div qui sont dans le bloc d’ID zonePrincipale seront affectés par le style.

Si vous avez un doute, remontez lire la section sur la combinaison des trois méthodes.

Si le deuxième div doit avoir son propre style, il faut lui donner un ID ou alors lui affecter une classe. Autrement dit, il faut aller modifier le code HTML.

Mais il est aussi possible en CSS de demander ...