Les sélecteurs CSS 2 et 3
Les règles des feuilles de styles sont composées d'un sélecteur qui désigne l'élément du code HTML et d'une définition comportant une liste de propriétés relatives à cet élément HTML ou cette classe d'éléments.
Un sélecteur peut être un sélecteur simple ou un sélecteur composé, ou une chaîne de sélecteurs simples ou composés séparés par des combinateurs. Ceux-ci sont les signes > ou + ou espace blanc.
Le sélecteur simple
Ce peut être le nom d'une balise, celui d'une classe précédé d'un point, celui d'un identifieur précédé du symbole dièse.
Exemple, un code HTML:
<div id="identifieur" class="box" >La feuille de style associée:
div { background:white; }Tous les calques auront un fond blanc.
#identifieur { color:red; }Le seul calque dont l'identifieur est "identifieur" aura un texte de couleur rouge. Les autres auront la couleur de texte par défaut du conteneur ou la page.
.box { border: 1px solid gray; }Tous les calques appartenant à la classe "box" auront un bord gris d'un pixel d'épaisseur. Ainsi que tous les autres éléments HTML auxquels on associera cette classe.
En conclusion, les sélecteurs permettent d'associer un style à un élément unique, à une balise ou à des balises différentes mais ayant une même classe.
Le sélecteur universel
Le symbole * représente tout éléments, toutes les classes, id, ou balises.
La règle:
* { color:blue; }s'applique à <p>, <h1> et toutes autres balises, ainsi que tout élément nommé.
Règle de regroupement
Si l'on a deux règles dont le corps est le même, mais définissant des sélecteurs différents, par exemple:
h2 { color: blue; }
h3 { color: blue; } On peut les regrouper en une seule, en séparant les sélecteurs par une virgule:
h2, h3 { color: blue; }
Règles de sous-ensembles
On peut définir une règle pour un type de balise, pour une classe ou un objet unique mais aussi plus précisément, pour une classe assignée à un type de balise.
Pour récapituler:
- a { }
est une règle s'appliquant à toutes les balises <a>. - .blue { }
est une règle s'appliquant à tous les éléments de la classe "blue". - a.blue { }
s'applique seulement aux balises <a> qui sont de la classe "blue". - a#ident { }
s'applique uniquement à la balise <a> dont l'id est "ident". Un id doit être malgré tout unique.
Par exemple, pour désigner cet élément:
<a class="blue" href="" >Lien</a> on utilisera la troisième règle.
Règles de combinaison
Les combinaisons permettent de désigner élément par rapport à un autre élément, selon diverses voies.
- element1 element2
L'espace exprime la contenance. L'élément 2 doit être contenu dans l'élément 1. - element1 > element 2
Le symbole ">" exprime la descendance directe. L'élément 2 doit être contenu dans l'élément 1 directement et pas dans un autre. - element1 + element2
Le symbole "+" exprime la succession. L'élément 2 doit succéder directement à l'élément 1.
CSS 3 ajoute element1 ~ element2. Le symbole "~" exprime la succession indirecte. L'élément 2 succède à l'élément 1, mais il peut y avoir d'autres éléments entre eux.
Sélecteur d'attribut
Pour les balises comme <input> qui correspondent à des objets différent selon l'attribut type, il est possible de sélectionner les balises en fonction de l'attribut et retenir celles qui ont un attribut donné ou dont l'attribut à une value donnée.
Syntaxe:
balise[attribut]ou:
balise [attribut="valeur"] Par exemple:
input [type="button"]
{
...
}Ceci permet d'associer un style à tous les boutons mais pas à toutes les balises input.
Le sélecteur element[attribut|="chaîne"] retient l'ensemble des balises/classes avec l'attribut "attribut", la valeur une liste de termes séparés par une espace et contenant le mot "chaîne".
Sélecteurs d'états
Pour les balises comme <a> qui ont plusieurs états dépendant de la navigation et non du code HTML, le séparateur ":" permet de spécifier un état.
Soit element la balise ou la classe attribuée à un lien ou un ensemble de liens:
- element:link
désigne le lien quand il n'a pas été visité durant la session. - element:visited
désigne le lien déjà visité. - element:active
désigne le lien s'il correspond à la page affichée. - element:hover
quand la souris passe sur la balise. - element:focus
quand la balise à le focus.
CSS 3 a inclut de nouveaux états que l'on verra plus loin. En outre ces états peuvent s'appliquer à d'autres balises que <a>.
Sélecteurs de parties
Le symbole "::" permet de définir plus spécifiquement une partie à l'intérieur du contenu d'une balise.
- element::first-line
désigne la première ligne du contenu affichée par le navigateur. - element::first-letter
désigne le premier caractère du texte contenu.
Ainsi que d'autres d'intérêt moindre.
CSS 3, nouveaux sélecteurs
La terminologie a un peu évolué avec la nouvelle spécification. Le mot simple désigne une composante d'une séquence de sélecteurs alors qu'en CSS 2 cela désignait cette séquence.
Le combinateur tilda fait son apparition.
Attributs et expressions régulières
- element[nom ^="chaîne"]
Elément qui a l'attribut nom avec une valeur qui commence par la chaîne "chaîne". - element[nom $="chaîne"]
La valeur de l'attribut "nom" se termine par "chaîne". - element[nom *="chaîne"]
La valeur de l'attribut "nom" contient une sous-chaîne "chaîne". - element[attribut |="chaîne"]
Déjà dans CSS 2.
Eléments contenus
- element:first-child
Déjà dans CSS 2.
Designe un élement de type "element" qui est le premier descendant direct dans un conteneur quelconque. Si "element" par exemple est une balise <li>, li:first-child désigne le premier <li> de la liste. - element:last-child
Element de type "element" qui est le dernier descendant direct de ce type dans un conteneur quelconque. Le dernier <li> dans une liste, par exemple. - element:nth-child(n)
N est un numéro correspondant au nème descendant du type "element" dans un conteneur quelconque. - element:nth-last-child(n)
En partant du dernier.
Eléments contenus de même type
- element:first-of-type
Premier descendant de type "element" parmi les descendants du conteneur de "element". - element:last-of-type
Dernier descendant de même type que "element" dans le même conteneur. - element:nth-of-type(n)
N est un numéro correspondant au nème descendant du type "element" dans le parent. - element:nth-last-of-type(n)
En partant du dernier.
Différence entre first-child et first-of-type
Dans le premier cas, le premier descendant du parent doit avoir le type de l'élément, c'est le cas d'une liste où tous les éléments sont de type <li>.
Dans le second cas le parent peut avoir des descendants de différents types, et c'est le premier qui a le type "element" qui est concerné.
Différence entre nth-child() et nth-of-type()
Comme précédemment, mais c'est le nème élément qui est concerne.
Dans le premier cas le parent contient n éléments de type "element".
Dans le second le parent contient n éléments de différents type et le nème de type "element" est considéré.
Autres critères de descendance
- element:empty
Element sans descendant. Par exemple: <p></p>.
Sélection selon l'état
Cela complète les états de balises en CSS 2.
- element:enabled
Associe le style défini à l'élément quand il est actif seulement. - element:disabled
Associe le style à l'élément quand il est désactivé. - element.checked
Associe le style à l'élément quand il est coché.
Sélection complémentaire
- element:not(s)
S'applique aux élément qui sont différents du sélecteur s, et donc applique le style quand le style de s ne s'applique pas, tout au moins à partir de la définition fournie par s.
Quelques autres sélecteurs dont l'intérêt semble marginal et l'implémentation concrète incertaine ont été omis.
Tous les sélecteurs sont insensibles à la casse avec cette limitation que les identifieurs peuvent comporter des majuscules en XHTML, et non en HTML.