Un sélecteur est une sorte d'étiquette qui identifie un bloc de règle dans une feuille de style et permet de la lier
à un élément de la page HTML. Un sélecteur peut consister en un sélecteur simple ou en une succession d'un, ou plusieurs,
sélecteurs simples, séparés par des combinateurs.
Ces combinateurs sont : les caractères blancs et les
caractères">" et "+". Des caractères blancs peuvent être insérés entre un combinateur et ses sélecteurs simples.
Un sélecteur simple peut être :
Nous nous limiterons ici à la description des caractéristiques et du fonctionnement des sélecteurs simples. Pour des informations plus pointues sur les sélecteurs consultez le site très complet de YoyoDesign .
Un sélecteur de type ou de balise est tout simplement un sélecteur désigné par la balise de la page HTML
à laquelle sont attachés des éléments de style.Toute balise peut ainsi servir de sélecteur. Voici par exemple le propriétés
du sélecteur h1 (titre principal) de ce site :
Le sélecteur universel, noté * , est vérifié pour le nom de n'importe quel type d'élément. Il agit sur chacun des éléments de l'arbre du document.
Le sélecteur de classe ou ( class ) permet de définir un style qui pourra être appliqué à n'importe
quel élément HTML du site.
Dans la feuille de style, le bloc de règles est identifié par un nom quelconque précédé d'un point.
Dans le code HTML le
nom du sélecteur sans le point est placé comme valeur de l'attribut class de la balise, voir ci-contre :
Un sélecteur de classe peut être appliqué à n'importe quelle balise, toutes ces balises auront donc le même style.
Ainsi la classe .texte de l'exemple précédent pourrait, outre à p,aussi bien être appliqué à
div, à span ou à em.
Une même balise peut également se voir doter de
propriétés différentes, une balise p peut par exemple avoir un texte de couleur blanche par la classe .texte
(color:#fff) une nouvelle classe .texteJ qui lui confère un texte de couleur jaune.
Par contre, attention! On ne peut spécifier qu'une seule classe dans l'attribut class d'un élément HTML.
Le sélecteur d'identifiant comme le sélecteur de classe permet de définir un style qui pourra
être appliqué à n'importe quel élément HTML du site.
Dans la feuille de style, le bloc de règles est identifié par un nom
quelconque précédé du symbole dièse #.
Dans le code HTML le nom du sélecteur sans le symbole dièse #
est placé comme valeur de l'attribut id de la balise, par exemple pour cette page :
Il y a néanmoins une différence fondamentale avec le sélecteur de classe : un attribut id sert à identifier
un élément unique. L'attribut id ne peut donc être utilisé qu’une seule fois dans une page.
On peut bien sûr définir autant d'id que l'on veut dans la feuille de style, mais il faut qu'ils soient uniques dans
la page html.
L'id doit être utilisé systématiquement pour les objets unique pour faciliter la lecture du code.
Par exemple, il faut donner un id à body, au bloc d'en-tête, ou aux blocs gauche ou droit. L'id
peut servir d'ancre nommée, car il remplace name.
Ainsi dans cette page, l'id #conteneur permet le retour en haut de page :
Par contre pour les paragraphes ou listes de menu l'usage des classes est plus approprié puisqu'il existe plusieurs objets de ce type dans la même page.
AVEUX D'UN NÉOPHYTE : Il y a quelques mois, faisant mes premiers pas en CSS et n'ayant pas encore très bien compris
la distinction entre id et class, j'ai allègrement utilisé dans de nombreuses pages des sélecteurs
id à de multiples reprises dans la même page comme des sélecteurs class. Bien sûr je n'avais pas cherché
à établir des liens vers ces id.
Ces pages qui ont été publiées s'affichent sans problème et mon ordinateur n'a pas explosé d'indignation devant le sacrilège commis.
Tous les bons manuels et tutos martèlent qu'il ne faut utiliser les id qu'une seule fois dans la même page sans préciser
vraiment pourquoi. Il me semble à mon expérience que l'unique distinction entre ces deux sélecteurs est donc la possibilité d'établir
des liens vers une id.
Pour vous en convaincre consultez-donc l'
Expérience Amusante
que j'ai réalisée.
Les pseudo-classes constituent des classes prédéfinies en CSS. Elles s’appliquent à certains éléments dont l’état peut changer.
Les plus connues et plus populaires concernent les liens hypertextes qui possèdent plusieurs états :
visité, actif et non visité.
Aussi, chaque état possède-t-il une pseudo-classe correspondante, soit,
:visited, :active et :link. Il existe également la pseudo-classe : hover
qui indique que le lien est survolé.
À titre d’exemple, définissons ci-contre les couleurs des liens selon chaque état :
Ici, le lien normal sera bleu (:link), quand on le survolera (:hover) il deviendra rouge,
quand on clique dessus(:active) et qu’on maintient le clic, il est orange et une fois le lien cliqué
(:visited) il devient vert.
Il est important de respecter l’ordre d’écriture pour que le tout fonctionne.
la pseudo-classe :hover doit suivre :link et :visited pour fonctionner,
de même :active doit suivre :hover.
Classes et Pseudo-classes peuvent être combinées pour par exemple distinguer les propriétés des liens propres
aux menus de celles des autres liens de la page, comme le montre l'exemple ci-contre extrait de la feuille de style de ce site :
Citons également pour mémoire la pseudo-classe :lang et les pseudo-éléments :first lign et :first letter. Vous pouvez vous documenter sur ces sélecteurs dans le site de YoyoDesign cité plus haut.
Au lieu de répéter la même règle pour plusieurs sélecteurs, on peut regrouper ces sélecteurs en les séparant par des virgules.
Ainsi comme le montre l'exemple ci-dessus, dans la feuille de style attachée à cette page, les sélecteurs de type h1 à h6 ayant les même propriétés de couleur de texte, d'alignement et de graisse de police sont regroupés.
Pour permettre la cascade des styles, des règles de calcul de spécificité permettent au moteur de rendu CSS de déterminer le degré de priorité à appliquer à différents sélecteurs visant concurremment un même élément, et de trier ainsi les règles à lui appliquer . Ce calcul repose sur la somme des valeurs données aux différents sélecteurs simples formant le sélecteur contextuel :