Cette page traite des sélecteurs utilisés pour identifier les parties d'un document qu'on veut formater. Je commence par une présentation du « Document Object Model », je continue en présentait toutes les formes que peuvent prendre les sélecteurs individuels et en montrant comment les composer.
Avant d'aller dans les détails des sélecteurs utilisés en CSS, il faut tout d'abord considérer quelle est la structure d'une page Web.
Le Document Object Model
Une page Web est constituée de balises qui sont hiérachisées en une structure décrite par le Document Object Model (ou DOM), une interface de programmation qui est indépendante de tout langage de programmation et de toute plate-forme. Il définit la structure logique arborescente d'un document (interprété dans son sens le plus général) en terme de noeuds et d'éléments qui peuvent être accédés et manipulés.
Le contenu d'une page HTML est organisé en balises imbriquées, c'est à dire que les éléments sont contenus dans des éléments plus gros. Le parent est un élément qui en contient d'autres (les enfants). Dans le modèle DOM (je simplifie beaucoup ici), les balises sont des noeuds de l'arborescence. En fait, <html> est le noeud racine de l'arborescence. alors que les noeuds <head> et <body> sont au deuxième niveau. L'arborescence des noeuds se poursuit ainsi vers le bas avec tous les noeuds de la page comme illustré dans le diagramme qui suit
 |
Contenu des balises
Une balise peut avoir des propriétés mais la plupart ont aussi un contenu (<br />, <hr /> et quelques autres balises n'en ont pas). Pour des balises comme <a> ou <p>, il s'agit de texte mais généralement un énoncé comme <a ...>contenu de la balise</a>, "contenu de la balise" est un noeud du diagramme DOM (ils ont été sous-entendu dans le diagramme montré plus haut). Pour beaucoup de balises, ce contenu peut consister en du texte et/ou d'autres balises.
Par exemple, le contenu de la balise <html> est la page complète alors que pour les balises <p> et <a>, il peut s'agir de texte qui, lui même, peut contenir des balises.
Éléments du DOM
Dans le modèle DOM, tous les noeuds sont des éléments qui peuvent être atteints et manipulés. Cependant, les propriétés des balises sont aussi des éléments qui, elles aussi peuvent être atteintes et manipulées. Dans l'exemple (un peu farfelu) qui suit,
<a id="mon_id" class="ma_classe" title="mon_titre" name="mon_nom" type="mon_type">Mon lien</a>la balise "a" est un élément mais l'identificateur (id) "mon_id" en est un aussi de même que la classe (class) "ma_classe". Il en va de même de l'attribut title et de l'attribut name. Il faut aussi noter que dans cet exemple, "Mon lien" est aussi un élément appelé élément contenu et c'est celui qui sera affecté lorsqu'une ou des règles de style s'appliqueront.
Note de l'auteur
Pour ceux qui sont curieux d'en savoir plus sur le DOM, je recommande la lecture de
Document Object Model sur Wikipedia et de
Document Object Model (DOM) sur le site de W3C Architecture Domain
Sélecteurs individuels
En CSS, ce sont des règles de reconnaissance de formes (pattern matching) qui déterminent les règles de style qui vont s'appliquer aux éléments dans l'arborescence d'un document: ce sont les sélecteurs. Leur complexité peut aller d'un simple nom de balise (par exemple ul pour la balise <ul>) à une expression très complexe (par exemple #mon_id .ma_classe>[title=mon_titre]). Cependant, les éléments du document qui seront sélectionnés seront ceux qui rencontrent les exigences du sélecteur. Lorsque c'est le cas, c'est toujours l'élément "contenu" de la balise qui est affecté per les règles de style.
Ainsi, le sélecteur universel * sélectionne tout dans la page alors que le sélecteur ul sélectionne toutes les balises <ul> de la page. # suivi de mon_id sélectionne la balise dont l'identificateur est "mon_id" (elle doit être unique dans la page), le sélecteur . suivi de ma_classe sélectionnera toutes les balises de classe "ma_classe" alors que [name] sélectionnera toutes les balises qui ont un attribut "name".
À un niveau de complexité un peu plus élevé, on retrouve alors les sélecteurs suivants:
- [attribute=value] comme dans l'exemple [target=_blank] qui sélectionne tous les éléments pour lesquels l'attribut target a la valeur _blank.
- [attribute~=value] comme dans l'exemple [title~=fleur] qui sélectionne tous les éléments avec un attribut title contenant le mot "fleur";
- [attribute|=value] comme dans l'exemple [lang|=en] qui sélectionne tous les éléments dont la valeur de l'attribut lang commence par "en";
- [attribute^=value] comme dans l'exemple a[src^="https"] qui sélectionne tous les éléments <a> dont la valeur de l'attribut src commence par "https"
- [attribute$=value] comme dans l'exemple a[src$=".pdf"] qui sélectionne tous les éléments <a> dont la valeur de l'attribut src se termine par ".pdf";
- [attribute*=value] comme dans l'exemple a[src*="gtro"] qui sélectionne tous les éléments <a> dont la valeur de l'attribut src contient la sous-chaîne "gtro";
- :attribute(value) comme dans l'exemple p:lang(it) qui sélectionne tous les éléments <p> dont la valeur de l'attribut lang commence par "it";
Pour que le traitement des sélecteurs soit complet, j'ai inclus dans la table qui suit tous les sélecteurs individuels qui existent quoiqu'ils soient moins utilisés de façon courante:
| Selecteur | Exemple | Description |
|---|---|---|
| :root | :root | sélectionne l'élément racine |
| :empty | p:empty | sélectionne chaque élément <p> qui n'a pas d'enfant (incluant le noeud contenu) |
| :not(selector) | :not(p) | sélectionne tous les éléments qui ne sont par des éléments <p> |
| :link | a:link | sélectione tous les liens qui n'ont pas été visités |
| :visited | a:visited | sélectionne tous les liens qui ont été visités |
| :active | a:active | sélectionne tous les liens actifs |
| :hover | a:hover | sélectionne les liens lors d'un survol de la souris |
| :enabled | input:enbled | sélectionne chaque élément <input> qui est en fonction (enabled); |
| :disabled | input:disabled | sélectionne chaque élément <input> qui n'est pas en fonction (disabled) |
| :checked | input:checked | sélectionne chaque élément <input> qui est "checked" |
| :focus | input:focus | sélectionne l'élément <input> qui a le "focus" |
| :first-letter | p:first-letter | sélectionne la première lettre de chaque élément <p> |
| :first-line | p:first-line | sélectionne la première ligne d chaque élément <p> |
| :first-child | p:first-child | sélectionne chaque élément <p> qui est le premier enfant de son parent |
| :first-of-type | p:first-of-type | sélectionne chaque élément <p> qui est le premier élément <p> de son parent; |
| :last-of-type | p:last-of-type | sélectionne chaque élément <p> qui est le dernier élément <p> de son parent; |
| :only-of-type | p:only-of-type | sélectionne chaque élément <p> qui est le seul élément <p> de son parent |
| :only-child | p:only-child | sélectionne chaque élément <p> qui est le seul enfant de son parent |
| :nth-child(n) | p:nth-child(2) | sélectionne chaque élément <p> qui est le 2e enfant de son parent |
| :nth-last-child(n) | p:nth-last-child(2) | sélectionne chaque élément <p> qui est le 2e enfant de son parent, en comptant à partir du dernier enfant |
| :nth-of-type(n) | p:nth-of-type(2) | sélectionne chaque élément <p> qui est le 2e élément <p> de son parent |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | sélectionne chaque élément <p> qui est le 2e élément <p> de son parent en comptant à partir du dernier enfant |
| :last-child | p:last-child | sélectionne chaque élément <p> qui est le dernier enfant de son parent |
| :before | p:before | Insère le contenu avant celui de chaque élément <p> |
| :after | p:after | Insérer le contenu après chaque élément <p> |
| ::selection | ::selection | sélectionne la partie d'un élément sélectionné par l'usager |
Sélecteurs composites
On peut aussi combiner plusieurs sélecteurs individuels en des sélecteurs composites comprenant des association de sélecteurs indifviduels. Cette composition s'effectue avec les notations suivantes:
- sélecteur1,sélecteur2 comme dans l'exemple div,p qui sélectionne tous les éléments <div> et tous les éléments <p>;
- sélecteur1 sélecteur2 comme dans l'exemple div p qui sélectionne tous les éléments <p> à l'intérieur d'éléments <div>;
- sélecteur1>sélecteur2 comme dans l'exemple div>p qui sélectionne tous les éléments <p> dont le parent est un élément <div>;
- sélecteur1+sélecteur2 comme dans l'exemple div+p qui sélectionne tous les éléments <p> qui sont placés immediatement après des éléments <div>;
- sélecteur1~sélecteur2 comme dans l'exemple p~ul qui sélectionne tous les éléments <ul> précédés par un élément <p>;
Maintenant qu'on sait comment sélectionner les éléments sur lesquels on veut agir, regardons comment ces règles CSS vont influer sur l'apparence de la page.
