Developpez.com

Une très vaste base de connaissances en informatique avec
plus de 100 FAQ et 10 000 réponses à vos questions

Developpez.com - CSS
X

Choisissez d'abord la catégorieensuite la rubrique :


Cours sur les CSS : Les sélecteurs

Date de publication : 29 juin 2011.

Par Christophe F. (Ma page personnelle)
 

Dans ce quatrième article de la série sur les feuilles de style en cascade nous allons étudier les sélecteurs.

Nous venons de voir la syntaxe générale d'une règle CSS. Il s'agit maintenant d'approfondir les différentes composantes d'une règle CSS : dans cet article nous allons donc étudier en détail le premier élément qui compose une règle CSS, c'est à dire les sélecteurs.

Le sélecteur est la partie d'une règle CSS qui vous permet de déterminer à quel(s) élément(s) de la page vont s'appliquer les styles spécifiés. Il a donc pour rôle d'indiquer au navigateur ce qui doit être mis en forme.

Nous allons étudier tous les sélecteurs disponibles, depuis CSS 1 jusqu'aux derniers crées par les spécifications CSS 3. Cela regroupe le sélecteur universel, le sélecteur de type, les sélecteurs de classe et d'id, les sélecteurs de filiation, les sélecteur d'attribut, et enfin les pseudo-classes et pseudo-éléments.

Tous ces sélecteurs ne sont pas uniformément gérés par les navigateurs. Il faudra dont préciser pour chaque sélecteur sa compatibilité avec les navigateurs disponibles sur le marché.


Cet article est le quatrième d'une série consacrée à CSS, retrouvez les autres articles de cette série dans le sommaire ou dans l'encadré bleu en bas de page.

Tous mes remerciements vont à ....

Commentez cet article : Commentez Donner une note à l'article (0)

    
Viadeo Twitter Facebook Share on Google+        



Les sélecteurs : premier élément d'une règle CSS
A. Introduction : quelques définitions
B. Le sélecteur universel
C. Le sélecteur de type
D. Les sélecteurs crées par l'utilisateur
1. Différences entre sélecteurs de classe et d'id
2. Sélecteur de classe
3. Sélecteur d'id
E. Les sélecteurs de filiation
1. Sélecteur de descendance
2. Sélecteur d'enfant
3. Sélecteur d'adjacence (ou combinateur d'adjacence directe)
4. Sélecteur d'adjacence (ou combinateur d'adjacence indirecte)
G. Le sélecteur d'attribut
1. Tester l'existence d'un attribut
2. Tester la valeur d'un attribut
3. Tester l'existence d'une sous-chaine dans la valeur de l'attribut
a. Tester l'existence d'une sous-chaine au début de la valeur de l'attribut.
b. Tester l'existence d'une sous-chaine dans la valeur de l'attribut, peu importe où elle se trouve.
c. Tester l'existence d'une sous-chaine à la fin de la valeur de l'attribut.
F. Les Pseudo-classes et Pseudo-éléments
1. Les pseudo-éléments
a. Agir sur la première ligne d'un élément : le pseudo-élément :first-line
b. Agir sur la première lettre d'un élément : le pseudo-élément :first-letter
c. Agir avant et après un élément : les pseudo-éléments :before et :after
2. Les pseudo-classes
a. Les pseudo-classes dynamiques
i. Les pseudo-classes dynamiques :link et :visited
ii. La pseudo-classe dynamique :hover
iii. La pseudo-classe dynamique :active
iv. La pseudo-classe dynamique :focus
b. Les pseudo-classes structurelles
i. La pseudo-classe structurelle :first-child
ii. La pseudo-classe structurelle :last-child
iii. La pseudo-classe structurelle :first-of-type
iv. La pseudo-classe structurelle :last-of-type
v. La pseudo-classe structurelle :only-child
vi. La pseudo-classe structurelle :only-of-type
vii. La pseudo-classe structurelle :root
viii. La pseudo-classe structurelle :nth-child(n)
ix. La pseudo-classe structurelle :nth-last-child(n)
x. La pseudo-classe structurelle :nth-of-type(n)
xi. La pseudo-classe structurelle :nth-last-of-type(n)
xii. La pseudo-classe structurelle :empty
c. Les pseudo-classes d'état d'élément d'interface
i. La pseudo-classe d'état d'élément d'interface :enabled
ii. La pseudo-classe d'état d'élément d'interface :disabled
iii. La pseudo-classe d'état d'élément d'interface :checked
d. Les pseudo-classes diverses
i. La pseudo-classe :target
ii. La pseudo-classe :lang()
iii. La pseudo-classe :not()
Annexes : liste des sélecteurs et leurs compatibilités
Remerciements


Les sélecteurs : premier élément d'une règle CSS

Dans cet article nous allons évoquer les différents sélecteurs existants depuis la spécification CSS 1 et jusqu'à CSS 3.

Tous les sélecteurs ne sont pas gérés par l'ensemble des navigateurs, même en ce qui concerne les sélecteurs de CSS 2.1. En particulier Internet Explorer 6 n'implémente pas un certain nombre de ces sélecteurs. Je préciserai pour chaque type de sélecteur s'il existe des incompatibilités avec certains navigateurs, notamment pour Internet Explorer 6.

Internet Explorer 7 a fait des progrès de ce coté, il gère presque tous les sélecteurs de CSS 2.1. Les autres navigateurs gèrent tous les sélecteurs, en tout cas en ce qui concerne les sélecteurs CSS 2.1. Pour ce qui est des nouveautés de CSS 3, Internet Explorer est encore nettement en retard par rapport à ses concurrents. Ceux-cis, dans leurs dernières versions implémentent toutes les nouveautés des sélecteurs CSS 3.

VOUS TROUVEREZ EN fin d'article un condensé de tous les sélecteurs et de leurs compatibilités

Mais avant d'aborder les différents types de sélecteurs, évoquons quelques définitions tel qu'elles ressortent du module sélecteurs de CSS 3.


A. Introduction : quelques définitions

warning Ces notions sont assez abstraites, surtout pour quelqu'un qui n'a encore jamais étudié les différents types de sélecteurs. Si c'est votre cas, je vous conseille plutôt de passer sur cette introduction et de commencer à directement étudier les types de sélecteurs, quitte à revenir sur ces notions par la suite.
Un sélecteur est une chaîne d'une ou de plusieurs séquences de sélecteurs simples séparés par des combinateurs.

Une séquence de sélecteurs simples est une chaîne de sélecteurs simples qui ne sont pas séparés par des combinateurs. La séquence de sélecteurs simples débute toujours avec un sélecteur de type ou un sélecteur universel. Il n'y a pas d'autre sélecteur de type ou sélecteur universel dans une séquence de sélecteurs simples : si un de ces éléments est présent, alors on passe automatiquement à une nouvelle séquence de sélecteurs simples.

Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel, soit un sélecteur d'attribut, soit un sélecteur de classe, soit un sélecteur d'id, soit une pseudo-classe. Un pseudo-élément peut suivre la dernière séquence de sélecteurs simples dans un sélecteur.

Les combinateurs sont au nombre de 4 : ce sont le caractère 'espace' ( ), le caractère 'plus grand que' (>), le caractère 'plus' (+) et le caractère tilde (~).

Mis en oeuvre sur un cas concret cela donne un sélecteur :
Un exemple de sélecteur qu'on va décortiquer :

div.header h2 > p#intro span {
 
Voici donc un sélecteur (chaîne d'une ou de plusieurs séquences de sélecteurs simples séparés par des combinateurs) qu'on peut diviser en :



Comme nous l'avons déjà défini plus haut les sélecteurs permettent de déterminer les éléments qui doivent être mis en forme.

Les éléments répondant aux critères de sélection d'un sélecteur sont appelés les sujets du sélecteur. Un sélecteur va avoir comme sujets tous les éléments qui répondent à ces critères de sélection. L'objectif de cet article est de vous expliquer en détail quels sont ces critères.

Un sélecteur composé d'une séquence de sélecteurs simple va avoir comme sujets tous les éléments répondant aux critères de cette séquence de sélecteurs. Rajouter une nouvelle séquence de sélecteurs à cette séquence va rendre les critères de sélection plus restrictifs et va restreindre le champ d'application dudit sélecteur. Ainsi les sujets d'un sélecteur correspondent toujours à un sous-ensemble des sujets obtenus à partir de la précédente séquence de sélecteurs.

Prenons un exemple simple à base de sélecteurs de type. Soit le sélecteur suivant :
Un exemple de sélecteur qu'on va décortiquer :
div p span {
        propriété :      valeur;
} 
Le sélecteur div va permettre de sélectionner tous les éléments div dans le document. En ajoutant le sélecteur simple p on va sélectionner tous les éléments p qui se trouvent englobés dans un élément div et exclure tous les autres. Les critères sont alors plus restrictifs, le champ d'application du sélecteur se réduit.
Si on ajoute encore le sélecteur simple span, on en réduira d'autant le champ d'application car seront alors les sujets du sélecteur seul les éléments span se trouvant à l'intérieur d'éléments p, eux même devant se trouver englobés à l'intérieur d'éléments div.





LU JUSQU'ICI



Mise en oeuvre à un code XHTML de ce sélecteur :
<body>
  <p>
Cet élément ne sera jamais sélectionné par le sélecteur "div p" parce qu'il ne se trouve pas englobé 
dans un élément div.
  </p>
  <div>
    <p>
Cet élément sera sélectionné par le sélecteur "div p".
    </p>
    <p>
Cet élément sera sélectionné par le sélecteur "div p" ainsi que <span>cet élement qui sera sélectionné 
par le sélecteur "div p span"</span>. 
    </p>
<span>Alors que cet élément span ne sera pas pris en compte par le sélecteur "div p span"</span> est ce conforme normes?
    <blockquote>
      <p>
Et lui ????
      </p>
    </blockquote>
  </div>
</body>
C'est ainsi que les sujets du sélecteur div p span sont bien un sous ensemble des sujets du sélecteur div p puisqu'on ne sélectionne que les éléments span qui sont les enfants des éléments p qui, eux même, doivent être des enfants des éléments div.


rajouter exemple

idea Ces notions sont assez abstraites, surtout pour quelqu'un qui n'a encore jamais étudié les différents types de sélecteurs. Si c'est votre cas, je vous conseille plutôt de passer sur cette introduction et de commencer à directement étudier les types de sélecteurs, quitte à revenir sur ces notions par la suite.
Nous pouvons maintenant nous atteler à l'étude des différents types de sélecteurs. Nous allons partir des sélecteurs les plus simples et les plus génériques pour terminer par les plus conplexes et les plus spécifiques.


B. Le sélecteur universel

Le sélecteur universel est représenté par une étoile : c'est à dire le caractère *.
Le sélecteur universel :
* {
        border :           1px solid red;
        margin :           4px;
}
Ce sélecteur sert à sélectionner tous les éléments du document à partir de la racine du document (comme dans l'exemple ci dessus, à condition bien sur que l'élément en question accepte la propriété spécifiée (ex : l'élément <tr> n'accepte pas les bordures)).


Il peut être utilisé seul comme dans l'exemple ci dessus, mais il peut aussi être utilisé en compagnie d'autres sélecteurs. Placé après une séquence de sélecteurs simple il permettra de sélectionner tous les éléments enfants de cette séquence.
Le sélecteur universel combiné à d'autres sélecteurs :
div * {
        border :           1px solid red;
        margin :           4px;
}
* p {
        background-color : cyan;
}
Pour la première règle le style s'applique à l'ensemble des enfants des éléments div, si vous n'aviez pas précisé le sélecteur universel le style se serait appliqué uniquement aux éléments div eux mêmes.
En ce qui concerne la seconde règle le style s'applique à l'ensemble des paragraphes (<p>), préciser dans ce cas le sélecteur universel n'est pas nécessaire car implicite : en effet en laissant de coté le sélecteur universel on aboutit au même résultat.



C. Le sélecteur de type

Le sélecteur de type est un des sélecteur de base, il est utilisé dans de très nombreux cas. Il faut simplement indiquer le nom de l'élément (X)HTML qu'on souhaite sélectionner, par exemple <p> ou <h1>.
Le sélecteur de type :
p {
        font :             1.2em 'Times New Roman', sherif;
        color :            blue;
}
Cet exemple va sélectionner tous les paragraphes du document et leur appliquer le style indiqué.



D. Les sélecteurs crées par l'utilisateur

Le CSS met à votre disposition 2 types de sélecteurs que vous pouvez mettre en oeuvre n'importe où dans le document : ce sont les sélecteurs de classe et d'id. Ces sélecteurs sont très bien pris en charge par l'ensemble des navigateurs. Avant d'étudier ces 2 sélecteurs, voyons d'abord les différences qu'il y a entre eux.


1. Différences entre sélecteurs de classe et d'id

Le sélecteur d'id doit être unique : il ne peut apparaître qu'une seule fois dans le document (X)HTML. Il ne peut être l'identifiant que d'un seul élément du document. Le sélecteur de classe n'a pas cette limitation, il peut se retrouver autant de fois que nécessaire dans un même document (X)HTML. Il peut donc référencer un nombre illimité d'éléments du document, indépendamment de leur type ou de leur objectif.

Contrairement à la classe, l'id ne sert pas qu'aux feuilles de style. L'id va pouvoir être utilisé par un langage de script comme Javascript pour accéder à un élément unique, dans ce cadre l'id est le successeur de l'attribut name devenu obsolète en XHTML. Il sert également pour positionner une ancre en (X)HTML : en ajoutant le nom de l'id à l'url on va accéder à l'endroit de la page où se trouve l'élément disposant de ce nom d'id.

Ces deux utilisations nécessitent que l'id soit unique dans le document : en effet imaginez que vous fassiez une ancre qui se trouve deux fois dans un même document, lequel sera choisi pour faire le lien ? Cela pourrait créer des incohérences. Il est donc important de respecter ce principe.


2. Sélecteur de classe

Une classe va se retrouver dans les deux codes (X)HTML et CSS. Vous allez mettre en oeuvre le sélecteur de classe parce qu'il vous faut distinguer certains éléments du document (X)HTML pour leur attribuer un style précis. La première démarche est donc d'attribuer une classe au(x) élément(s) (X)HTML voulu(s). Pour ce faire vous allez déclarer l'attribut class dans le document (X)HTML :
Insertion d'une classe dans le document (X)HTML :
<div class="nomdelaclasse">
contenu
</div>
Nous pouvons alors passer au document CSS : dans la feuille de style un sélecteur de classe commence par un point, suivi du nom correspondant à la valeur de l'attribut class du document (X)HTML. Le point qui précède le nom de la classe est là pour indiquer que c'est un sélecteur de classe, il ne doit pas se retrouver dans le document (X)HTML mais uniquement dans le document CSS.
Représentation d'un sélecteur de classe dans un fichier CSS :
.nomdelaclasse {
        font-size :        1.2em;
        text-decoration :  underline;
}

 
Le nom de la classe doit se composer uniquement de lettres, nombres, tirets ou tirets bas (underscore). Il doit aussi commencer par une lettre et jamais par un chiffre. Contrairement au principe, le nom de la classe est sensible à la casse car il est originaire du code (X)HTML qui est lui, sensible à la casse. Les espaces dans les noms de classe sont interdits, nous verrons plus loin pourquoi.
Exemples de noms de classes qui sont interdits :
.§@ {
        background-color : orange;
}
#1a1a {
        background-color : orange;
}

Une classe peut être attribuée à n'importe quel élément (X)HTML, les classes ne sont pas limitées à un seul type de balise (<div>, <img>, <p>...). Ces différents éléments disposeront alors du style commun déclaré dans la classe.
Attribuer à des balises différentes la même classe :
<p class="bordure">
élément avec bordure
</p>

<img src="image.jpg" alt="" class="bordure" />
Application d'un style à la classe bordure :
.bordure {
        border :           2px dashed purple;
}
Dans cet exemple deux éléments différents (<p> et <img>) se voient déclarés la même classe 'bordure', son style s'applique donc indistinctement à ces deux éléments.


Il est aussi possible d'attribuer le même nom de classe à des éléments différents sans que ceux cis doivent partager les mêmes règles. Pour cela il suffit de combiner les sélecteurs que nous avons déjà vus : en ajoutant à un sélecteur de type un sélecteur de classe on peut cibler plus spécifiquement les éléments qu'on veut sélectionner.
Attribution de règles différentes à une même classe en combinant les sélecteurs :
p.bordure {
        border :           2px dashed purple;
}

img.bordure {
        border :           0 none;
}
Dans cet exemple les 2 éléments <p> et <img> possèdent la même classe 'bordure'. Dans le code CSS nous affectons cependant des déclarations différentes en fonction de l'élément auquel s'applique la classe bordure : en préfixant un sélecteur de classe d'un sélecteur de type on sélectionne les éléments (X)HTML uniquement si on leur a attribué la classe indiquée dans la règle CSS.
Cela permet aussi de cibler les sélecteurs de type : au lieu que la règle s'applique à l'ensemble des éléments <img>, elle ne s'appliquera qu'à ceux des éléments <img> pour lesquels est déclaré l'attribut class avec comme valeur 'bordure'.


On peut donc attribuer un nom de classe à un élément, mais le système est encore plus flexible car il permet d'attribuer plusieurs noms de classe pour un même élément : il suffit de séparer les différents noms de classe par un espace (d'où l'interdiction des espaces dans un nom de classe).
Attribuer plusieurs classes à une même balise (X)HTML :

<p class="nomdeclasse1 nomdeclasse2">
 
L'élément possédant plusieurs noms de classe se verra attribuer les styles de chaque classe. Dans le cas de déclarations contradictoires entre les classes, ce sont les déclarations de la dernière classe qui s'appliquent. Dans cet exemple le paragraphe se verra attribuer les styles de 'nomdeclasse1' et de 'nomdeclasse2'.


Il existe encore une autre écriture tirant profit des classes multiples pour un même élément : cela consiste dans le chaînage des noms de classe dans les feuilles de style, plusieurs noms de classes se suivent sans espace, juste séparés par le point caractérisant les classes.
Exemple de chainage des classes :
p.class1.class2 {
        propriété :        valeur;
}
Les déclarations vont s'appliquer uniquement aux éléments qui possèdent tous ces noms de classe dans leur attribut class.

Le style déclaré dans la règle ci dessus s'appliquera à ces exemples :
Un sélecteur chainé avec class1 et class2 s'appliquera à ces éléments :
<p class="class1 class2">
p.class1.class2 s'applique à cet élément.
</p>

<p class="class1 class0 class2 class3">
p.class1.class2 s'applique également à cet élément.
</p>
Mais pas à ces deux autres exemples :
Un sélecteur chainé avec class1 et class2 ne s'appliquera pas à ces éléments :
<p class="class1">
p.class1.class2 ne s'applique pas à cet élément.
</p>
<p class="class2">
p.class1.class2 ne s'applique pas à cet élément SAUF pour Internet Explorer 6 
qui ne reconnait pas les div chainées.
</p>
warning Cette règle ne sera pas comprise par Internet Explorer 6 qui se conforme encore ici à la spécification CSS 1. Il ne reconnaîtra que le dernier nom de classe de la chaîne (dans le document CSS). En d'autres termes il appliquera le style attribué à div.class1.class2 indistinctement à un élément <div> référençant et les classes 'class1' et 'class2', qu'à un élément <div> ne référençant que la classe 'class2'.

 
Enfin, pour bien utiliser les classes pensez à prendre des noms explicites : évitez par exemple des noms qui sont relatifs à la mise en forme des éléments (ex : petit, bleu, grandes_marges...). Si vous décidez un jour de changer de mise en forme vous vous retrouverez soit avec des incohérences (classe bleu qui est en faite verte...), soit vous devrez changer vos noms de classe, du travail supplémentaire que vous pourriez vous économiser.

De même évitez d'utiliser trop de classes dans une même balise. Un code bien structuré et la mise en oeuvre du principe de l'héritage ne nécessite pas l'utilisation de nombreuses classes. En cas de conflit entre déclarations il faut savoir que c'est la classe qui est déclarée la dernière qui prévaudra sur les précédentes.


3. Sélecteur d'id

Un id sera également référencé dans les deux codes (X)HTML et CSS. Vous allez donc attribuez un id à l'élément voulu et seulement à celui ci. En effet ce sont des identifiants uniques qui ne doivent être définis qu'une seule fois dans un document (X)HTML. Pour ce faire il faut commencer par déclarer l'attribut id dans le document (X)HTML :
Insertion d'un id dans le document (X)HTML :
<div id="nomdelid">
contenu
</div>
Là encore, la seconde étape se passe dans le fichier CSS : dans la feuille de style un sélecteur d'id commence par un dièse (#) suivi du nom que vous avez donné à la valeur de l'attribut id du document (X)HTML. Le dièse qui précède le nom de l'id est là pour indiquer que c'est un id, il ne doit pas se retrouver dans le document (X)HTML mais uniquement dans le document CSS.
Représentation d'un sélecteur de classe dans un fichier CSS :
#nomdelid {
        propriété :        valeur;
}

Le nom d'un id suis les mêmes règles que les classes, je vous invite à vous référer à ce qui a été dit précédemment.

Nous l'avons vus plus haut, la principale caractéristique de l'id c'est qu'elle doit être unique dans un document. Les navigateurs sont plutôt laxistes à ce sujet et ils tolèrent plusieurs id identiques dans un même document. Mais cela risque de conduire à des conflits dans le cadre de l'utilisation des ancres ou encore de Javascript, sans compter que votre document ne sera plus valide et vous retournera des erreurs lors de la validation avec les outils du W3C...

De la même manière que les classes, un id peut être attribué à n'importe quel élément, les id ne sont pas limités à un seul type d'élément... Par contre il n'est pas possible d'attribuer plusieurs id à une même balise. Ce code n'est pas correct :
On ne peut déclarer qu'un seul id par élément (X)HTML :

<div id="monid1 monid2">
 

On peut également adjoindre un sélecteur d'id à un sélecteur de type pour qu'il ne s'applique qu'à un seul type d'élément. Cela a son utilité dans le sens où le paragraphe précédent interdit la présence de plusieurs id identiques dans un même document, mais n'interdit pas la présence de plusieurs id identiques dans différents documents (X)HTML. En d'autres termes l'id doit être unique dans le document (X)HTML, mais il peut se retrouver autant de fois que nécessaire dans le fichier CSS.
Donc, en adjoignant un sélecteur de type à un sélecteur d'id, on peut leur appliquer différents styles en fonction des éléments auxquels ils s'appliquent.

Naturellement les remarques sur les noms attribués aux classes, développés ici, s'appliquent également aux id.


E. Les sélecteurs de filiation

Les sélecteurs qui vont être évoqués ici sont basés sur une notion fondamentale des langages de balisage, qui est celle de hiérarchie. Il convient donc d'expliquer cette notion avant de rentrer dans le vif du sujet.

Un document (X)HTML est composé d'éléments qui ont tous entre eux une relation de filiation. Il faut voir chaque couple de balise ouvrante et fermante comme une boite pouvant en contenir d'autres (souvenez vous de l'exemple concernant le sélecteur universel pour vous le représenter). Des éléments se trouvant entre les balises ouvrantes et fermantes d'un autre élément sont les descendantes de celui ci. Ainsi l'ensemble des éléments d'un document peuvent être représentés comme un arbre généalogique. Les éléments ont des relations de filiation entre eux : des relations d'ascendance, de descendance ou fraternelle (entre frères et soeurs).
Un exemple simple de code (X)HTML pour souligner les relations de filiation :
<html>
  <head>
    <title>Titre</title>
    <meta>
    <link>
  </head>
  <body>
    <div>
      <h1>Titre</h1>
      <p>paragraphe</p>
      <ul>
        <li>élément de liste</li>
        <li>élément de liste</li>
      </ul>
    </div>
    <div>
      <p>
        <img src="lien/vers/image.jpg" alt="Texte alternatif" />
      </p>
      <p>du texte <em>texte</em></p>
    </div>
  </body>
</html>
Voici une représentation graphique de l'arbre généalogique de ce code :

Arbre généalogique
Dans cet exemple la balise <h1> est le descendant direct de la balise <div> elle même descendant de la balise <body>. Cette balise <div> a 3 descendants : <h1>, <p> et <ul> ; on peut aussi dire que la boite <div> contient 3 descendants. <li> est aussi un descendant de <div>, mais ce n'est pas un descendant direct : <li> est le fils de <ul>, le petit-fils de <div>, l'arrière petit fils de <body>, etc... <h1>, <p> et <ul> sont au même niveau, ils ont une relation de frères et soeurs.

On peut mettre en évidence ces relations de filiation en indentant correctement le code : les éléments enfants sont mis en retrait par rapport à leur parent. Cette méthode vous donne un code plus lisible car cela vous permet de situer immédiatement un élément dans la hiérarchie.

Cette explication préliminaire était nécessaire pour comprendre les sélecteurs de filiation, qui sont basés sur cette notion de hiérarchie qu'ils mettent en oeuvre de trois manières : les sélecteurs de descendance, qui recensent tout élément descendant d'un autre ; les sélecteurs d'enfant qui recensent le premier descendant de son parent et les sélecteurs d'adjacence qui recensent les éléments qui sont au même niveau.


1. Sélecteur de descendance

Ce sélecteurs permet d'appliquer un style à un élément parce qu'il est le descendant d'un autre, peu importe dans l'ordre de filiation, à quel niveau il se trouve : il peut être le fils, le petit-fils, l'arrière petit-fils, etc...

Pour utiliser ce sélecteur, indiquez l'élément parent, suivi de l'élément enfant, éventuellement suivi du petit-enfant, etc... chaque élément étant séparé par un espace. Cet espace est un des combinateur et va signaler par sa présence qu'on met en oeuvre le sélecteur de descendance.
Un exemple de sélecteur de descendance :
div p {
        propriété :        valeur;
}
Cet exemple va appliquer le style à tous les éléments <p> qui sont les descendants d'un élément <div>.
Exemple d'application d'un sélecteur de descendance au code (X)HTML :
<p>Le style ne s'applique pas à ce paragraphe</p>
<div>
  <p>Le style s'applique à ce paragraphe</p>
  <p>Le style s'applique également à ce paragraphe</p>
</div>

Il est aussi possible de combiner les sélecteurs, en utilisant par exemple les sélecteurs de type associés aux sélecteurs de classe ou d'id :
Exemple de sélecteurs de type, de classe et d'id associés aux sélecteurs de descendance :
div.class1 span#monid1 {
        propriété :        valeur;
}
div.class1 span.class2 {
        propriété :        valeur;
}
Cet exemple montre aussi que le sélecteur descendant ne doit pas forcément être un descendant direct, mais peut être un petit fils du sélecteur utilisé en référence :
Exemple d'application d'un sélecteur de descendance de second niveau au code (X)HTML :
<div class="class1">
  <p>
Exemple de sélecteur qui est le <span class="class2">petit fils de l'élément div</span>
  </p>
  <blockquote>
    <p>
Autre exemple de sélecteur qui est l'<span id="monid1">arrière petit fils de l'élément div</span>
    </p>
  </blockquote>
</div>

Les exemples qu'on vient de montrer se limitent à deux séquences de sélecteurs simples, mais vous n'êtes aucunement limité à ce niveau, le sélecteur de descendance permet d'inclure autant de niveaux que désiré. On peut ainsi débuter le sélecteur de descendance par la racine du document, soit l'élément <html>, et suivre ainsi l'ensemble de la filiation jusqu'à l'élément qu'on veut cibler.
Exemple de sélecteur de descendance à multiples niveaux :
html body div#centrer div#corps div#menu ul li span#monid {
        propriété :        valeur;
}
Il est aussi possible d'utiliser le sélecteur universel associé au sélecteur de descendance.
Exemple de sélecteur de descendance combiné au sélecteur universel :
div p * {
        propriété :        valeur;
}
Notez bien la différence entre ce code et le premier de ce paragraphe : le code div p * va sélectionner tous les éléments enfants de <p> se trouvant dans un élément <div>. Alors que le code suivant div p signifie qu'on sélectionne tous les éléments <p> se trouvant dans un élément <div>.


Vous pouvez aussi rencontrer ce sélecteur sous le nom de sélecteur contextuel, c'est le nom qu'il avait dans les spécifications CSS 1. Ce nom a été modifié dans CSS 2 car d'autres sélecteurs contextuels ont été ajoutés, c'est ce qu'on va voir maintenant.


2. Sélecteur d'enfant

Le sélecteur d'enfant fonctionne de la même manière que le sélecteur de descendance, à la différence que le sélecteur d'enfant sélectionne uniquement les enfants directs de leur élément parent, excluant ainsi les petits-enfants, les arrière-petits-enfants... Il se base sur une relation exclusive parent/enfant.

Ce sélecteur utilise le combinateur 'supérieur à', aussi appelé chevron fermé (>).
Exemple de sélecteur d'enfant :
p > span {
        propriété :        valeur;
}
Dans cet exemple le style ne s'appliquera à <span> que s'il est l'enfant direct de <p>.
Exemple d'application d'un sélecteur d'enfant au code (X)HTML :
<p>
Le style s'applique à l'enfant direct de p : s'applique à <span>ce span</span>, ainsi qu'à 
<span>ce span</span>, parce qu'ils sont les enfants directs. <em>Mais pas à <span>celui ci</span> 
qui n'est plus l'enfant direct</em>.
</p>
Les 2 exemples combinés, vous allez constater que le style s'applique au deux premiers <span> mais pas au troisième. Cela s'explique par le fait que les deux premiers <span> sont les enfants directs de <p>, alors que le troisième <span> est un petit-enfant de <p>, car il est inclus dans un élément <em>.


Comme nous avons pu le voir plus tôt, le système des sélecteurs en CSS est très souple. Le sélecteur d'enfant n'y déroge pas : il est donc possible de placer autant de sélecteurs d'enfants que nécessaire dans une chaîne de sélecteurs, de même qu'il est possible de faire toutes les combinaisons imaginables entre les différents types de sélecteurs.
Exemples de sélecteurs d'enfants combinés avec d'autres sélecteurs :
div > p > span {
        propriété :        valeur;
}

div > p.class1 span {
        propriété :        valeur;
}
Le premier exemple montre une chaîne de sélecteurs d'enfant ; on sélectionne ici tout élément <span> enfant direct de <p> lui même enfant direct de <div>.
Le second exemple montre une combinaison entre sélecteurs d'enfant, de classe et de descendance : on sélectionne tous les éléments <span> descendants (directs ou non) de <p> ayant comme nom de classe 'class1' et qui lui, est l'enfant direct de <div>.


warning Cette syntaxe n'est pas reconnue par Internet Explorer 6 qui va donc ignorer la règle.

3. Sélecteur d'adjacence (ou combinateur d'adjacence directe)

Ce sélecteur permet de sélectionner l'élément adjacent à un autre, c'est à dire l'élément qui se trouve, dans le code, directement après un autre et au même niveau. Aucun autre élément, qu'il soit de même type ou de type différent, n'est autorisé entre les deux. Il se base sur une relation fraternelle, c'est à dire une relation entre frères et soeurs.

Le sélecteur d'adjacence directe utilise le combinateur 'plus', c'est à dire le signe + :
Exemple de sélecteur d'adjacence directe :
blockquote + p {
        propriété :        valeur;
}
Cet exemple signifie que l'on applique le style à tous les éléments <p> se trouvant dans le code, immédiatement après un élément <blockquote>.
Exemple d'application d'un sélecteur d'adjacence directe au code (X)HTML :
<blockquote>
  <p>
Ceci est une citation longue.
  </p>
</blockquote>

<p>
Ce paragraphe se verra appliquer le style indiqué précédemment par le sélecteur blockquote + p.
</p>

<p>
Ce paragraphe ne se verra pas appliquer le style indiqué précédemment par le sélecteur blockquote + p.
</p>

Là encore il est possible de placer autant de sélecteurs d'adjacence que nécessaire dans une chaîne de sélecteurs, de même qu'il est possible de faire toutes les combinaisons imaginables entre les différents types de sélecteurs.

warning Ce sélecteur n'est pas reconnue par Internet Explorer 6.

4. Sélecteur d'adjacence (ou combinateur d'adjacence indirecte)

Ce sélecteur permet de sélectionner un élément adjacent à un autre. A la différence du sélecteur précédent, l'élément adjacent n'a pas besoin de se trouver directement après le premier. Il se base également sur une relation fraternelle, c'est à dire une relation entre frères et soeurs.

Le sélecteur d'adjacence indirecte utilise le combinateur 'tilde', c'est à dire le signe ~ :
Exemple de sélecteur d'adjacence indirecte :
div ~ p {
        propriété :        valeur;
}
Cet exemple signifie qu'on applique le style à tous les éléments <p> qui se trouvent au même niveau qu'un élément <div> et après celui ci, peut importe qu'il y ait ou pas d'autres éléments qui les sépare.
Exemple d'application d'un sélecteur d'adjacence indirecte au code (X)HTML :
<div>
Ce div est le frère de blockquote et de p
</div>

<blockquote>
  <p>
Citation longue
  </p>
</blockquote>

<p>
Ce paragraphe est le frère de div et il ne le suis pas immédiatement. Le style s'applique cependant à lui.
</p>

<p>
Ce paragraphe est également le frère de div et il ne le suis pas immédiatement. Le style s'applique 
également à lui.
</p>

C'est un nouveau sélecteur qui est introduit par CSS 3.

warning Ce sélecteur n'est pas reconnue par Internet Explorer 6.

G. Le sélecteur d'attribut

Ce sélecteur permet de sélectionner des éléments (X)HTML possédant des attributs ou des valeurs d'attributs précis. Un attribut est une propriété associée à une balise (X)HTML à laquelle on peut donner une ou plusieurs valeurs définies. Sont par exemple des attributs : type, id, name ou encore value sur une balise <input>, href sur une balise <a>, src et alt sur une balise <img>...
Exemples d'attibuts sur des balises (X)HTML :
<a href="lien">

<input type="text" id="id_unique" name="nom" value="valeur" />

<img src="mon-image.jpg" alt="Texte alternatif" />
idea Vous pouvez vous référer à ce cours pour un complément d'informations : fr les bases du html.
Les sélecteurs d'attribut disposent d'une syntaxe variée, qui permet une large mise en oeuvre : on peut vérifier l'existence d'un attribut, on peut également vérifier le contenu d'un attribut : soit une valeur exacte, soit une valeur possible parmi d'autres, soit encore une valeur spécifique au début de la chaîne, à la fin de la chaîne, ou à l'intérieur de la chaîne quel que soit son emplacement.

warning Internet Explorer 6 ne gère aucune des syntaxes du sélecteur d'attribut.

1. Tester l'existence d'un attribut

Il est possible d'appliquer un style à tout élément présent dans le document (X)HTML pour lequel a été défini un attribut. Pour ce faire la syntaxe utilise les crochets à l'intérieur desquels on va préciser le nom de l'attribut recherché.
Exemple de sélecteur d'attribut :
[title] {
        propriété :        valeur;
}
Cet exemple va appliquer le style à tous les éléments du document (X)HTML pour lesquels on a déclaré l'attribut title.


Il est possible de rendre ce sélecteur plus spécifique en précisant également le type de balise qu'on veut viser. Par exemple si on ne souhaite appliquer un style qu'aux images disposant de l'attribut title, on spécifie le nom de l'élément avant l'attribut, seul ce dernier se trouvant entre crochets.
Exemple de sélecteur d'attribut associé à un sélecteur de type :
img[title] {
        propriété :        valeur;
}
Dans cet exemple seul les balises <img> pour lesquels sont déclarées l'attribut title vont se voir attribuer le style spécifié.


On peut aussi vérifier la présence de plusieurs attributs sur un même élément. Pour ce faire, il suffit d'indiquer à la suite l'un de l'autre, les différents attributs recherchés, chacun entre crochets, et sans les séparer par un espace.
Exemple de sélecteur d'attribut où l'on recherche la présence de plusieurs attributs :
a[href][title] {
        propriété :        valeur;
}
Dans l'exemple ci dessus, se voient appliquer le style tous les éléments <a> pour lesquels sont définis et l'attribut href et l'attribut title.



2. Tester la valeur d'un attribut

Jusqu'à présent nous n'avons testé que l'existence d'un attribut, nous pouvons aussi vérifier la valeur d'un attribut. Il suffit pour cela, de spécifier entre les crochets, en plus de l'attribut recherché, la valeur recherchée :
Exemple de sélecteur d'attribut pour tester la valeur d'un attribut :
input[type="text"] {
        propriété :        valeur;
}
Cet exemple va appliquer le style à toute balise <input> dans laquelle est déclaré l'attribut type qui aura exactement pour valeur la chaîne 'text'.


Vous n'êtes pas limité à un seul attribut : on peut vérifier la présence et la valeur de plusieurs attributs dans un élément :
Exemple de sélecteur d'attribut pour tester la valeur de plusieurs attributs :
input[type="text"][name="nom"] {
        propriété :        valeur;
}
Cet exemple va sélectionner toutes les balises <input> ayant un attribut type avec comme valeur exacte 'text' et un attribut name avec comme valeur exacte 'nom'.

Ici non plus les parties entre crochets ne doivent pas être séparés par un espace sinon on appliquerait le sélecteur de descendance.



Ce système ne permet que de sélectionner les éléments dont la valeur de l'attribut est exactement ce que vous avez spécifié. Or il arrive que dans certains cas, un attribut puisse avoir plusieurs valeurs possibles séparées par des espaces, il existe alors la syntaxe suivante basée sur le tilde (caractère ~) :
Exemple de sélecteur d'attribut basé sur le tilde :
a[rel~="copyright"] {
        propriété :        valeur;
}
Cette syntaxe utilise le tilde entre l'attribut recherché et le égal indiquant la valeur ciblée. Elle va permettre de sélectionner tous les éléments <a> pour lesquels est déclaré l'attribut rel, celui ci pouvant avoir plusieurs valeurs séparées par un espace, dont au moins l'une d'entre elles est exactement égale à 'copyright'. Cela permet par exemple de sélectionner les liens suivants :
Exemple de balise <a> sélectionnée par cette règle :
<a href="lien.html" rel="copyright">Lien</a>
<a href="lien.html" rel="copyright copyleft copyeditor">Lien</a>
<a href="lien.html" rel="copyleft copyright copyeditor">Lien</a>

<!-- mais pas les liens suivants -->
<a href="lien.html">Lien</a>
<a href="lien.html" rel="copy right copyleft copyeditor">Lien</a>
<a href="lien.html" rel="copyleft copyeditor">Lien</a>

Il est encore possible de rechercher une sous chaîne se trouvant n'importe où dans la valeur de l'attribut. C'est ce que nous allons voir maintenant.


3. Tester l'existence d'une sous-chaine dans la valeur de l'attribut

Par sous-chaine on entend une partie d'une chaîne de caractères. En prenant comme exemple la chaîne "abcde", une sous chaîne serait "abc" par exemple.
Pour rechercher une sous-chaine dans la valeur de l'attribut, il existe trois syntaxes permettant de rechercher tantôt une sous-chaine précise au début de la valeur de l'attribut, tantôt à la fin, tantôt n'importe où dans la valeur de l'attribut.

Les trois méthodes utilisent la même syntaxe qui correspond à l'utilisation d'un caractère générique entre l'attribut et le signe égal qui précède la valeur recherchée. Dans l'exemple suivant les différents éléments sont remplacés par leur dénomination, sauf le caractère générique qui est ici remplacé par le point d'interrogation :
Exemple générique de la syntaxe pour tester l'existence d'une sous-chaine :
balise[attribut?="valeur recherchée"] {
        propriété :        valeur;
}

a. Tester l'existence d'une sous-chaine au début de la valeur de l'attribut.

En utilisant le caractère circonflexe (^) entre l'attribut et le signe égal, vous pouvez sélectionner les éléments dont l'attribut commence par une certaine valeur.
Exemple de sélecteur d'attribut ciblant une sous-chaine au début de la valeur :
a[href^="http://"] {
        propriété :        valeur;
}
Dans cet exemple si la valeur de l'attribut href commence par "http://" le style sera appliqué. En d'autres termes vous sélectionnez tous les liens dont l'URI est un chemin absolu.



Il existe encore une autre syntaxe utilisant la barre verticale (caractère |) entre l'attribut et le signe égal et permettant de tester l'existence d'une sous-chaine au début de la valeur de l'attribut.
Cette méthode permet de sélectionner les éléments dotés d'un attribut ayant une valeur soit qui est exactement la sous-chaine recherchée, soit qui commence par cette sous-chaine, immédiatement suivie d'un tiret, suivie d'une autre sous-chaine quelconque.
Exemple de sélecteur d'attribut utilisant le caractère | :
p[lang|="fr"] {
        propriété :        valeur;
}
Cet exemple va attribuer un style à tous les paragraphes possédant l'attribut lang dont la valeur est soit "fr", soit "fr-XX", où XX correspond par exemple à BE (pour la Belgique) ou encore à CA (pour le Canada). Ce sélecteur est spécifiquement destiné à permettre de sélectionner les langues et leurs 'codes pays'.



b. Tester l'existence d'une sous-chaine dans la valeur de l'attribut, peu importe où elle se trouve.

Cette syntaxe utilise le caractère étoile (*) entre l'attribut et le signe égal pour sélectionner tout élément dans lequel est déclaré un attribut dont la valeur contient une sous-chaine, peu importe que celle-ci se trouve au début, au milieu ou a la fin.
Exemple de sélecteur d'attribut ciblant une sous-chaine à l'intérieur de la valeur :
a[href*=".php"] {
        propriété :        valeur;
}
Dans cet exemple vous allez attribuer un style à tous les liens dans lesquels on renvoie vers un fichier .php, qu'il y ait ou pas des ancres ou des valeurs passées par l'URL (1) dans le lien... Cet exemple va pouvoir sélectionner les liens suivants :
Exemples de liens qui pourront être sélectionnés :
<a href="fichier.php">
<a href="fichier.php?id=kj34dsfg34df43t4zhty4rehojktr">
<a href="fichier.php#lien-ancre">


c. Tester l'existence d'une sous-chaine à la fin de la valeur de l'attribut.

L'utilisation du caractère dollar ($) entre l'attribut et le signe égal permet de sélectionner tous les éléments dont la valeur de l'attribut se termine par une sous-chaine précise.
Exemple de sélecteur d'attribut ciblant une sous-chaine à la fin de la valeur :
a[href$=".html"] {
        propriété :        valeur;
}
Dans cet exemple vous allez attribuer un style à tous les liens <a> qui se terminent par '.html', et donc qui renvoient vers un fichier '.html'. Cela excluera par exemple les liens vers les fichiers '.htm' ou '.php'.



F. Les Pseudo-classes et Pseudo-éléments

Les pseudo-classes sont un moyen d'interagir avec l'utilisateur dans le sens où ils permettent d'appliquer des styles en fonction de la position des éléments dans l'arbre du document ou encore de l'état des balises par rapport à des évènements dynamiques... Cela permet par exemple de détecter le survol de la souris, l'appui du bouton de la souris sur un élément, le focus sur un élément...

Les pseudo-éléments permettent d'attribuer un style à des zones précises d'un élément, là où il aurait fallu mettre en oeuvre un système compliqué de balises pour arriver au même but. On peut par exemple sélectionner le premier caractère ou la première ligne d'un paragraphe.

Les pseudo-classes et pseudo-éléments se présentent avec un (ou deux) double-point suivi du mot-clé représentant le nom de la pseudo-classe ou du pseudo-élément.

Les spécifications CSS 3 apportent de nombreuses nouveautés, notamment en créant un certain nombre de nouvelles pseudo-classes. Nous aborderons ces nouveaux sélecteurs en vous rappelant que le module sélecteurs de CSS 3 est dans la phase de Recommandation Proposée depuis le 15 décembre 2009. Donc, bien que ces nouveaux sélecteurs soient de mieux en mieux gérés par les dernières versions des navigateurs, les versions plus anciennes ne les implémentent pas. Internet Explorer quant à lui ne reconnais ces nouveaux sélecteurs dans aucune de ses versions, même la dernière.

Mais voyons d'abord les pseudo-éléments.


1. Les pseudo-éléments

Les pseudo-éléments créent un système de balises virtuelles et dynamiques permettant d'accéder à des zones qu'il n'est pas possible d'atteindre avec les balises existantes dans le langage (X)HTML. En effet, il n'est par exemple, pas possible d'attribuer un style à la première ligne d'un paragraphe sans mettre en place des balises supplémentaires, qui ne permettraient cependant pas de suivre dynamiquement la première ligne lors d'un changement de la largeur.

Pour par exemple appliquer un style à la première lettre de tous les paragraphes on écrira :
Exemple de pseudo-élément précédé d'un sélecteur de type :
p:first-letter {
        propriété :        valeur;
}

p::first-letter {
        propriété :        valeur;
}
Il ne peut y avoir qu'un seul pseudo-élément par sélecteur. Le pseudo-élément peut être le seul élément du sélecteur, alors il s'appliquera à tous les éléments du document. S'il ne l'est pas, alors le pseudo-élément doit apparaitre après la dernière séquence de sélecteurs simples qui va correspondre aux sujets du sélecteur. Il devra donc être le dernier dans la chaîne de sélecteurs.

Il vous est possible d'utiliser le combinateur 'espace', c'est à dire le principe de descendance avec les pseudo-éléments, mais alors il faut bien vérifier qu'il existe des éléments qui peuvent être les sujets du sélecteur. Par exempla le sélecteur p :first-letter n'aura aucun effet car les paragraphes ne peuvent pas avoir d'éléments enfants auxquels on peut appliquer le pseudo-élément :first-letter.
Si vous n'utilisez pas le combinateur 'espace', le pseudo-élément s'appliquera aux éléments de la dernière séquence de sélecteurs simples. Pour reprendre l'exemple ci dessus p:first-letter appliquera un style à la première lettre de tous les paragraphes sujets du sélecteur.

idea CSS 3 apporte une évolution qui va permettre de distinguer les pseudo-éléments des pseudo-classes. En effet les pseudo-éléments ne s'écrivent plus avec un double point (:first-letter), mais avec deux double points (::first-letter). L'ensemble des navigateurs alternatifs modernes prennent en charge cette nouvelle écriture. En ce qui concerne Internet Explorer, la version 6 prend en charge cette nouvelle écriture, mais pas Internet Explorer 7 ni Internet Explorer 8.
Les pseudo-éléments sont au nombre de quatre. CSS 3 n'a pas crée de nouveau pseudo-élément.


a. Agir sur la première ligne d'un élément : le pseudo-élément :first-line

Le pseudo-élément :first-line permet d'appliquer un style à la première ligne de l'élément visé, par exemple un paragraphe.
Exemple avec le pseudo-élément :first-line :
p:fist-line {
        propriété :        valeur;
}


b. Agir sur la première lettre d'un élément : le pseudo-élément :first-letter

Le pseudo-élément :first-letter permet d'appliquer un style à la première lettre de l'élément visé. On peut par exemple mettre en évidence la première lettre d'un paragraphe, d'un titre ou encore des éléments de menu...
Exemple avec le pseudo-élément :first-letter :
p:first-letter {
        propriété :        valeur;
}

 

c. Agir avant et après un élément : les pseudo-éléments :before et :after

Les pseudo-éléments :before et :after permettent d'insérer un style avant (:before) ou après (:after) l'élément visé. On peut par exemple ajouter une image à tous les liens en les plaçant à leur gauche.
Exemple avec les pseudo-éléments :before et :after :
a:before {
        content :          url('../images/logo_css.gif');
}
p:after {
        content :          " ! ";
}
Ils sont utilisés en conjonction avec la propriété content qui va permettre d'indiquer les éléments à insérer.


warning Ces pseudo-éléments ne sont pas gérés par Internet Explorer versions 6 et 7.

2. Les pseudo-classes

On peut répartir les différentes pseudo-classes en plusieurs groupes en fonction de leur action.

Les pseudo-classes permettent de spécifier des styles en fonction d'interactions avec l'utilisateur, ce sont les pseudo-classes dynamiques. Ou encore en fonction de la position des éléments dans la structure du document, ce sont les pseudo-classes structurelles. Egalement en fonction de l'état de certains éléments, ce sont les pseudo-classes d'état d'élément d'interface. Et enfin il existe quelques pseudo-classes diverses qui ne sont pas classables dans ces catégories.

Pour insérer une pseudo-classe dans une feuille de style, il suffit de l'indiquer à la suite de l'élément auquel vous voulez l'appliquer :
Exemple de mise en oeuvre de pseudo-classe :
a:link {
        propriété :        valeur;
}
Vous pouvez ajouter des séquences de sélecteurs simples avant et après la pseudo-classe, vous avez à ce niveau toute liberté. Les pseudo-classes diffèrent sur ce point avec les pseudo-éléments qui doivent être déclarés en dernier dans la chaîne de sélecteurs. Les pseudo-classes n'ont pas cette obligation, d'autres sélecteurs peuvent se trouver à leur suite, comme vous le verrez dans le prochain exemple.
Il vous est aussi possible de ne pas indiquer d'autre séquence de sélecteur simple avant la pseudo-classe, cela sous entend la mise en oeuvre du sélecteur universel et le style s'appliquera alors à tous les éléments de la page. Comme il est également possible d'utiliser le combinateur 'espace', ce qui sous tend là encore la mise en oeuvre du sélecteur universel. Dans ce cas le style s'appliquera à tous les éléments enfants ciblés par la chaine de séquence de sélecteur se trouvant avant.
Différents exemples de sélecteurs incluants des pseudo-classes :
:hover {
        propriété :        valeur;
}
#menu li a:active {
        propriété :        valeur;
}
#corps div:hover p.paragraph {
        propriété :        valeur;
}
La troisième règle a notamment pour effet que si vous survolez avec votre souris l'élément <div>, seul le paragraphe ayant l'attribut class avec comme valeur 'paragraph' se verra attribuer le style spécifié, et non l'ensemble de l'élément <div>.

Vous trouverez plus d'explications sur ce code en consultant l'exemple II-B-1-f-04 sur différentes manières d'insérer des pseudo-classes.


a. Les pseudo-classes dynamiques

Les pseudo-classes dynamiques vont permettre d'appliquer différents styles en fonction d'actions effectuées ou pas par l'utilisateur.


i. Les pseudo-classes dynamiques :link et :visited
Les conventions, reprises par les principaux navigateurs modernes, présentent les liens non visités en bleu et les liens visités en violet. Ce sont ces règles de style que vous pourrez modifier avec ces pseudo-classes. :link et :visited ne s'appliquent donc qu'aux liens, c'est à dire aux balises <a> disposant de l'attribut href.

Les pseudo-classes :link et :visited ne peuvent pas apparaître en même temps sur un même élément : les deux états sont mutuellement exclusifs. L'élément peut se trouver soit dans l'état non visité (:link), soit dans l'état visité (:visited), mais jamais dans les deux en même temps.

De même l'ordre de déclaration de ces pseudo-classes dans la feuille de style est très important. Si :link est déclaré après :visited, :hover ou :active, alors ces règles ne s'appliqueront pas. De même si :visited est déclaré après :hover ou :active, ces deux dernières pseudo-classes n'appliqueront pas non plus leur style. Cela est du au principe de la cascade qu'on évoquera un peu plus loin dans ce chapitre.


Il faut donc déclarer les pseudo-classes dans l'ordre suivant :
Ordre de déclaration des pseudo-classes dynamiques :
:link {
        propriété :        valeur;
}
:visited {
        propriété :        valeur;
}
:hover {
        propriété :        valeur;
}
:active {
        propriété :        valeur;
}
Pour ne pas tomber dans ce piège il existe un moyen mnémotechnique pour se souvenir de cet ordre : LoVe - HAte, qui va vous indiquer dans quel ordre déclarer vos pseudo-classes dynamiques, soit :link, :visited, :hover et :active.



ii. La pseudo-classe dynamique :hover
La pseudo-classe :hover applique un style à un élément lorsqu'il est survolé par le pointeur de la souris. Le style est appliqué aussi longtemps que le pointeur se trouve sur l'élément ; dès qu'il le quitte, l'élément reprend le style par défaut, celui qu'il possédait avant que la souris le survole.
Exemple de déclaration de la pseudo-classe :hover :
p:hover {
        propriété :        valeur;
}

warning Internet Explorer 6 n'applique cette pseudo-classe qu'aux éléments <a> alors qu'elle devrait s'appliquer à tous les éléments selon les spécifications CSS 2. Les autres navigateurs font un usage correct de :hover.

iii. La pseudo-classe dynamique :active
Cette pseudo-classe s'applique dès lors que l'utilisateur a commencé à cliquer sur un élément, et tant qu'il reste appuyé sur le bouton de la souris. Le style s'appliquera aussi longtemps que le bouton reste enfoncé.
Exemple de déclaration de la pseudo-classe :active :
input:active {
        propriété :        valeur;
}

warning Internet Explorer 6 et 7 n'appliquent cette pseudo-classe qu'aux éléments <a> alors qu'elle devrait s'appliquer à tous les éléments selon les spécifications CSS 2. Les autres navigateurs font un usage correct de :active.

iv. La pseudo-classe dynamique :focus
La pseudo-classe :focus s'applique à partir du moment où un élément a le focus, c'est à dire quand il accepte les événements effectués à partir du clavier, de la souris ou tout autre élément de pointage.

Quand vous vous trouvez dans une fenêtre du navigateur, si vous appuyez sur le bouton tabulation vous allez vous déplacer dans le document entre les différents éléments qui acceptent le focus. Vous accéderez notamment aux liens hypertexte, aux éléments de formulaire... Vous visualiserez ce déplacement grâce à une bordure qui se crée autour des éléments qui ont le focus, et qui se caractérise par des pointillés gris. Cette bordure se gère grâce à la propriété outlineMETTRE LE LIEN.

C'est le style de l'élément que vous avez sélectionné, que vous pourrez modifier grâce à la pseudo-classe :focus.
Exemple de déclaration de la pseudo-classe :focus :
input:focus {
        propriété :        valeur;
}

warning La pseudo-classe :focus n'est pas gérée par Internet Explorer versions 6 et 7.

Nous avons vus que les états de :link et :visited sont mutuellement exclusifs, ce n'est pas le cas des états :hover, :active et :focus. Un élément peut par exemple être en même temps :hover et :focus, c'est à dire être survolée et avoir le focus, ou :hover et :active, etc... On peut donc avoir la syntaxe suivante :
Exemple de cumul des pseudo-classes d'action :
input:hover:focus {
        propriété :        valeur;
}
Dans ce cas le style sera appliqué si le pointeur de la souris survole la balise <input> et si cette balise possède en même temps le focus, c'est à dire si le curseur se trouve à l'intérieur.



b. Les pseudo-classes structurelles

Les pseudo-classes structurelles se basent sur la position des éléments dans la structure du document pour leur associer des règles. Ils permettent la sélection d'éléments sur la base d'informations supplémentaires qui se trouvent dans l'arbre du document et qui ne peuvent pas être sélectionnés grâce à d'autres sélecteurs.

info Il existe actuellement 12 pseudo-classes structurelles, dont une seule est antérieure à CSS 3. Elles sont donc encore assez peu répandues dans les navigateurs.
warning Pour ces raisons l'ensemble de ces pseudo-classes sont très mal prises en charge : aucune d'entre elles est pris en charge par Internet Explorer 6, y compris :first-child qui est pourtant originaire de CSS 2. Elle est cependant prise en charge par Internet Explorer 7 et 8.
Les autres pseudo-classes structurelles ne sont prises en charge que par Firefox depuis sa version 3 (ou version 3.5 en fonction des pseudo-classes), Opéra depuis sa version 9, Safari depuis sa version 3 (pour Windows) et Google Chrome depuis sa version 1.

i. La pseudo-classe structurelle :first-child
Cette pseudo-classe s'applique uniquement au premier enfant d'un élément, un peu à la manière du sélecteur d'enfant. C'est la seule pseudo-classe structurelle qui a été crée dans les spécifications CSS 2.
Exemple d'utilisation de la pseudo-classe first-child :
p:first-child {
        propriété :        valeur;
}
Dans cet exemple tous les éléments <p> qui sont le premier enfant de leur parent se verront appliquer le style indiqué.


Là où la pseudo-classe :first-child diffère du sélecteur d'enfant, c'est qu'il faut que l'élément soit le premier enfant et le descendant direct de son parent. Si un autre élément se cale entre les deux, même de type différent, alors le style ne s'appliquera pas.
Comparaison de la pseudo-classe :first-child avec le sélecteur d'enfant :
<div>
  <p>La pseudo-classe :first-child s'applique à cet élément, de même que le sélecteur d'enfant, parce que c'est le premier 
enfant du parent div.</p>
</div>
<div>
  <h2>Titre qui se cale entre le div et le paragraphe.</h2>
  <p>La pseudo-classe :first-child ne s'applique pas à cet élément parce que ce n'est pas le premier enfant alors que le 
sélecteur d'enfant applique sont style.</p>
</div>

warning Cette pseudo-classe n'est pas gérée par Internet Explorer 6.

ii. La pseudo-classe structurelle :last-child
C'est le pendant de la pseudo-classe :first-child, à la différence qu'elle s'applique uniquement au dernier enfant d'un élément.
Exemple d'utilisation de la pseudo-classe :last-child :
p:last-child {
        propriété :        valeur;
}
Dans cet exemple tous les éléments <p> qui sont le dernier enfant de leur parent se verront appliquer le style indiqué. Ici aussi il faut que l'élément soit le dernier descendant. Si un autre élément, même de type différent, se cale après l'élément ciblé par la pseudo-classe :last-child, alors le style ne s'appliquera pas.


warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions ni par Opéra 8.5.

iii. La pseudo-classe structurelle :first-of-type
Cette pseudo-classe s'applique à un élément qui est le premier enfant de son type dans la liste des enfants de son élément parent. Pour être plus clair, prenons un exemple :
Exemple d'utilisation de la pseudo-classe :first-of-type :
li:first-of-type {
        propriété :        valeur;
}
Ce sélecteur s'appliquera, dans la liste des enfants des éléments <ul>, à tous les enfants <li> qui sont les premiers enfants de ce parent, peu importe qu'il y ait d'autres enfants de type différent avant ou pas.
Exemple de mise en oeuvre de la pseudo-classe :first-of-type dans le code (X)HTML :
<ul>
  <li>
La pseudo-class :first-of-type s'applique à ce paragraphe
  </li>
  <li>
mais pas à ce paragraphe
    <ul>
      <li>
elle s'applique également à ce paragraphe
      </li>
      <li>
mais pas à celui ci
      </li>
    </ul>
  </li>
  <li>
ni à celui ci
  </li>
</ul>

warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions, ni par Firefox antérieur à la version 3.5, ni par Opéra 8.5.

iv. La pseudo-classe structurelle :last-of-type
C'est le pendant de la pseudo-classe :first-of-type, à la différence qu'elle s'applique au dernier enfant de son type dans la liste des enfants de son élément parent.
Exemple d'utilisation de la pseudo-classe :last-of-type :
ul li:last-of-type {
        propriété :        valeur;
}
Ce sélecteur s'appliquera, dans la liste des enfants des éléments <ul>, à tous les enfants <li> qui sont les derniers enfants de ce parent, peu importe qu'il y ait d'autres enfants de type différent après ou pas.
Exemple de mise en oeuvre de la pseudo-classe :last-of-type dans le code (X)HTML :
<ul>
  <li>
La pseudo-class :last-of-type ne s'applique pas à cet élément
  </li>
  <li>
ni à celui ci
    <ul>
      <li>
ni à celui ci
      </li>
      <li>
La pseudo-class :last-of-type s'applique à cet élément
      </li>
    </ul>
  </li>
  <li>
elle s'applique également à cet élément
  </li>
<ul>

warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions, ni par Firefox antérieur à la version 3.5, ni par Opéra 8.5.

v. La pseudo-classe structurelle :only-child
Cette pseudo-classe s'applique à un élément dont le parent n'a pas d'autre élément enfant.
Exemple d'utilisation de la pseudo-classe :only-child :
p:only-child {
        propriété :        valeur;
}
Dans cet exemple le style s'appliquera à tous les paragraphes dont le parent aura pour seul enfant cet élément <p>.

Sont pris en considération pour déterminer le nombre d'enfants, uniquement des éléments qui sont au même niveau que l'élément ciblé (donc uniquement des frères). Peu importe le type d'élément, tout autre élément qui est le frère de l'élément ciblé entre en considération. Cependant l'élément ciblé par la pseudo-classe :only-child peut avoir des éléments enfants.
Du texte se trouvant au même niveau que l'élément cible et qui est situé en dehors de toutes balises ne sera pas pris en considération.
Exemples d'éléments pris en considération pour calculer le nombre d'enfants :
<div>
  <p>
Le style s'appliquera à ce paragraphe car c'est le seul enfant.
  </p>
</div>

<div>
Du texte hors de tout élément...
  <p>
Le style s'appliquera à ce paragraphe car c'est le seul enfant. Le texte ci dessus n'est pas pris en 
compte car en dehors de balises.
  </p>
</div>

<div>
  <p>
Le style ne s'appliquera pas à ce paragraphe...
  </p>
  <p>
car ce n'est pas le seul enfant. Celui ci étant le second enfant.
  </p>
</div>

<div>
  <p>
Le style ne s'appliquera pas à ce paragraphe non plus...
  </p>
  <h4>
même si le second enfant n'est pas du même type que l'élément ciblé.
  </h4>
</div>

<div>
  <p>
Le style s'appliquera à <strong>ce paragraphe</strong> car c'est le <em>seul enfant</em> même si celui ci 
dispose lui même <em>d'éléments enfants</em>..
  </p>
</div>

warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions ni par Opéra 8.5.

vi. La pseudo-classe structurelle :only-of-type
Cette pseudo-classe s'applique à un élément qui n'as pas de frère de type identique à lui au même niveau.
Exemple d'utilisation de la pseudo-classe :only-of-type :
p:only-of-type {
        propriété :        valeur;
}
Dans cet exemple le style s'appliquera à tout élément <p> qui n'as pas d'élément frère qui soit un élément <p>. Il peut y avoir des éléments frères, à la seule condition que ce ne soit pas un élément de type identique.
Exemple de mise en application de la pseudo-classe :only-of-type dans le code (X)HTML :
<div>
  <h3>
Cet élément étant un titre...
  </h3>
  <p>
La pseudo-class :only-of-type s'applique ici étant donné que l'autre élément frère est de type différent
  </p>
</div>

<div>
  <p>
La pseudo-class :only-of-type ne s'applique pas ici puisque l'autre élément frère est de même type
  </p>
  <p>
Ceci est un élément frère de type identique
  </p>
</div>

warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions, ni par Firefox antérieur à la version 3.5, ni par Opéra 8.5.

vii. La pseudo-classe structurelle :root
La pseudo-class :root permet d'appliquer un style à l'élément racine du document. Dans le langage (X)HTML c'est toujours l'élément <html>.
Exemple d'utilisation de la pseudo-classe :root :
:root {
        propriété :        valeur;
}
Dans cet exemple le style s'appliquera à l'élément racine du document, en d'autres termes à l'élément <html>.


warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions ni par Opéra 8.5.

viii. La pseudo-classe structurelle :nth-child(n)
La pseudo-class :nth-child() permet d'appliquer des styles alternativement à des balises de même type ou de type différent et qui se suivent (comme des cellules de tableaux, ou des éléments de listes) et en fonction de valeurs que vous aller indiquer.

Ces valeurs seront à indiquer entre les parenthèses qui suivent l'expression :nth-child. Ce peut être un mot-clé, un nombre ou une expression alphanumérique qui répond alors au schéma suivant : an+b. Ce schéma s'explique ainsi : l'ensemble des éléments concernés sont séparés en groupes de a éléments, puis on sélectionne le bème élément dans chaque groupe de a éléments.

Prenons un exemple pour bien comprendre :
Exemple de syntaxe pour la pseudo-classe nth-child :
p:nth-child(2n+1) {
        propriété :        valeur;
}
p:nth-child(2n+2) {
        propriété :        valeur;
}
Dans la première déclaration, l'ensemble des paragraphes d'un même parent seront divisés par groupes de deux (2n) et on appliquera le style au premier élément de chacun de ces groupes (+1). C'est à dire que la syntaxe 2n+1 correspond aux éléments impairs.
Dans la seconde déclaration, l'ensemble des paragraphes d'un même parent seront également divisés par groupes de deux (2n) et on appliquera le style au second élément de chacun de ces groupes (+2). C'est à dire que la syntaxe 2n+2 correspond aux éléments pairs (on verra plus loin qu'il y a une syntaxe plus simple pour sélectionner les éléments pairs et impairs).



La pseudo-classe :nth-child sélectionne les éléments sur la base de leur position dans la liste des éléments enfants de leurs parents.

Prennons l'exemple suivant :
Quels sont les éléments pris en compte pour le calcul des positions :
div :nth-child(2n+2) {
        propriété :        valeur;
}
div p:nth-child(2n+2) {
        propriété :        valeur;
}
Dans le premier exemple on applique :nth-child à tous les éléments enfants de div : on met en oeuvre le sélecteur de descendance.
Dans le second exemple on applique :nth-child à tous les paragraphes enfants de div et uniquement à ces paragraphes.

Cela veut dire que div :nth-child(2n+2) va attribuer aux éléments pairs, enfants de div, le style spécifié, peu importe le type de balise dont il s'agit et en tenant compte de l'ensemble des éléments enfants de div pour calculer la position de chacun.
Par contre div p:nth-child(2n+2) va attribuer aux seuls paragraphes pairs, enfants de div, le style spécifié mais en tenant tout de même compte de l'ensemble des éléments enfants de div pour calculer la position de chacun.



Nous pouvons maintenant étudier les règles applicables à l'argument an+b :

Les valeurs de a et b doivent être des entiers positifs, négatifs ou nuls. L'index du premier enfant d'un élément commence à 1.

Lorsque a vaut 0, les éléments ne sont pas séparés en groupes. Dans ce cas 0n+b sélectionnera uniquement le bième enfant. Dans ce cas aussi, la partie a n'est pas obligatoire et on pourra écrire :nth-child(b).
Exemple de la pseudo-classe :nth-child avec a valant 0 :
:nth-child(0n+3) /* sélectionne le 3ème élément */
:nth-child(3) /* est équivalent au précédent */

Si a vaut 1, le chiffre peut également être omis. Dans ce cas un seul groupe a est crée, et la valeur de b va déterminer à partir de quel élément le style s'appliquera : si b vaut 0 ou 1 tous les éléments seront sélectionnés ; si b vaut 2 alors tous les éléments sauf le premier seront sélectionnés ; si b vaut 3 alors tous les éléments sauf les deux premiers seront sélectionnés, etc...
Exemples de la pseudo-classe :nth-child avec a valant 1 :
td:nth-child(1n+0) /* représente tous les éléments div, spécificité de 0011 */
td:nth-child(n+0) /* identique au précédent */
td:nth-child(n) /* identique au précédent */
td /* identique au précédent, sauf avec une spécificité moindre : 0001 */
Exemples de la pseudo-classe :nth-child avec a valant 1 associé à différentes valeurs de b :
td:nth-child(1n+0)/* sélectionne tous les éléments */
td:nth-child(1n+1)/* sélectionne également tous les éléments */
td:nth-child(1n+2)/* sélectionne tous les éléments à partir du second */
td:nth-child(1n+5)/* sélectionne tous les éléments à partir du cinquième */

Si b vaut 0, alors tous les éléments dont l'index est multiple de a sont sélectionnés. On peut dans ce cas omettre b.
Par exemple si a vaut 2 et b vaut 0, alors tous les multiples de 2 seront sélectionnés, c'est à dire 2, 4, 6, 8, 10, 12... Si a vaut 3, alors ce seront tous les multiples de 3 qui seront sélectionnés, c'est à dire 3, 6, 9, 12, 15, 18...
Exemple de la pseudo-classe :nth-child avec b valant 0 et donc omis :
p:nth-child(2n) /* correspond à tous les éléments pairs */
p:nth-child(3n) /* correspond à tous les multiples de 3 : un élément sur trois est sélectionné */
p:nth-child(4n) /* correspond à tous les multiples de 4 : un élément sur quatre est sélectionné */

Si a et b valent tous deux 0, la pseudo-classe ne sélectionnera aucun élément dans le document.

Nous avons indiqué ci dessus que si les variables a ou b valent 0, alors vous pouvez les omettre, cela ne s'applique que sous réserve que vous n'omettez pas l'autre variable. En d'autres termes, soit vous omettez a et il faudra indiquer b, soit vous omettez b et il faudra spécifier a. Mais vous ne pourrez jamais omettre a et b en même temps car d'une part, le sélecteur ne serait alors pas valide, et d'autre part le style ne s'appliquerait alors à aucun élément.

info Si vous indiquer simplement le 'n' cela équivaut à attribuer la valeur 1 à a. Ce seront donc l'ensemble des éléments qui seront sélectionnés.
Exemple de la pseudo-classe :nth-child avec des valeurs nulles :
p:nth-child(0n+0) /* avec ces valeurs aucun élément ne sera sélectionné */
p:nth-child(0) /*  non plus aucun élément ne sera sélectionné */
p:nth-child() /*  non plus aucun élément ne sera sélectionné mais cette écriture n'est pas valide */
p:nth-child(n) /* ici a coorespond à 1 et donc tous les éléments sont sélectionnés */

Pour la sélection des éléments pairs et impairs, il existe une autre syntaxe, plus simple, se basant sur des valeurs alphabétiques. Ces valeurs sont 'odd' et 'even', le premier correspond aux éléments impairs, le second aux éléments pairs.
Exemple de nth-child avec les valeurs alphabétiques 'odd' et 'even' :
li:nth-child(odd) /* sélectionne les éléments impairs */
li:nth-child(even) /* sélectionne les éléments pairs */

warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions, ni par Firefox antérieur à la version 3.5, ni par Opéra 8.5.

ix. La pseudo-classe structurelle :nth-last-child(n)
La pseudo-classe :nth-last-child fonctionne de la même façon que :nth-child, à la différence qu'elle prend comme base de calcul pour l'index le dernier frère au lieu du premier.

Pour comprendre on va réutiliser un exemple mis en oeuvre ci dessus lors de l'étude de la pseudo-classe :nth-child. Dans ce cadre le code ci après signifie qu'on sélectionne le troisième élément, sous entendu à partir du début. Avec la pseudo-classe :nth-last-child(n) on sélectionne également le troisième élément, mais cette fois ci a partir de la fin.
Exemple de syntaxe avec :nth-last-child comparée à :nth-child :
li:nth-child(3) /* sélectionne le 3ème élément à partir du début */
li:nth-last-child(3) /* sélectionne le 3ème élément à partir de la fin */

info Pour ce qui concerne les détails de la syntaxe de l'argument an+b veuillez vous reporter aux explications données pour la pseudo-classe :nth-child ci dessus.
warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions, ni par Firefox antérieur à la version 3.5, ni par Opéra 8.5.

x. La pseudo-classe structurelle :nth-of-type(n)
La pseudo-classe :nth-of-type fonctionne également de la même façon que :nth-child, à la différence qu'elle traite indépendamment les éléments de même type. En d'autres termes l'ensemble des éléments d'un même type dans la liste des éléments de leur parent, sont séparés en groupes de a éléments, puis on sélectionne le bème élément dans chaque type de groupe de a éléments, et ainsi de suite pour chaque type.

Si vous avez par exemple deux types d'éléments différents, fils d'un même élément parent (div dans cet exemple), à qui on applique la pseudo-classe :nth-of-type, alors cette pseudo-classe s'appliquera indépendamment aux deux types d'éléments suivant les même règles que la pseudo-class :nth-child. Les positions de chaque type d'élément seront calculés sans tenir compte de la présence des autres éléments de type différent.
Exemple de pseudo-classe :nth-of-type :
div :nth-of-type(even) {
        background-color : lightblue;
}
Cette règle appliquera un arrière plan bleu clair à tous les éléments pairs mais indépendamment pour chaque type d'élément. Si par exemple ce code s'applique à des paragraphes et des titres qui s'imbriquent entre eux, chacun des deux types d'éléments verrons leur position paire ou impaire calculée indépendamment de l'existence de l'autre type d'élément.


info Pour ce qui concerne les détails de la syntaxe de l'argument an+b veuillez vous reporter aux explications données pour la pseudo-classe :nth-child ci dessus.
warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions, ni par Firefox antérieur à la version 3.5, ni par Opéra 8.5.

xi. La pseudo-classe structurelle :nth-last-of-type(n)
La pseudo-class :nth-last-of-type s'applique de la même manière que :nth-child et que :nth-of-type, à la différence qu'elle prend comme base de calcul pour l'index le dernier élément de chaque type au lieu du premier.

Si vous sélectionnez les éléments pairs de chaque type de balise, la pseudo-classe :nth-last-of-type prendra comme base le dernier élément de chaque type de balise pour déterminer s'il est pair ou impair.
Exemple de pseudo-classe :nth-last-of-type :
div :nth-last-of-type(even) {
        propriété :        valeur;
}

info Pour ce qui concerne les détails de la syntaxe de l'argument an+b veuillez vous reporter aux explications données pour la pseudo-classe :nth-child ci dessus.
warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions, ni par Firefox antérieur à la version 3.5, ni par Opéra 8.5.

xii. La pseudo-classe structurelle :empty
La pseudo-classe :empty applique un style uniquement aux éléments qui sont vides, c'est à dire qui n'ont aucun contenu : ni élément enfant, ni contenu textuel.
Exemple d'utilisation de la pseudo-classe :empty :
p:empty {
        propriété :        valeur;
}
Dans les exemples qui suivent, la pseudo-class :empty ne s'appliquera qu'au premier élément qui est le seul à être vide.
Exemple de mise en application de la pseudo-classe :empty dans le code (X)HTML :
<p></p>
<!-- le style s'appliquera à cet élément parce qu'il est vide -->

<p> </p><!-- le style ne s'appliquera pas à cet élément parce qu'il n'est 
pas vide : il y a un espace -->

<p>Du texte dans un paragraphe</p><!-- le style ne s'appliquera pas à cet élément parce qu'il 
n'est pas vide : il y a du texte -->

<p><em></em></p><!-- le style ne s'appliquera pas à cet élément parce qu'il 
n'est pas vide : il y a un élément em -->

<p>
  <em>
Du texte dans des balises &lt;em&gt; et dans un paragraphe
  </em>
</p>
<!-- le style ne s'appliquera pas à cet élément parce qu'il n'est pas vide : 
il y a un élément et du texte -->

warning Cette pseudo-classe n'est pas gérée par Internet Explorer dans toutes ses versions ni par Opéra 8.5.

c. Les pseudo-classes d'état d'élément d'interface

Ces pseudo-classes permettent d'interagir avec des éléments en fonction de leur état : c'est à dire s'ils sont actif ou inactifs, ou encore s'ils sont cochés ou non cochés. Il existe trois pseudo-classes d'état d'élément d'interface : :enabled, :disabled et :checked.

warning Les pseudo-classes d'état d'élément d'interface ne sont pas gérées par Internet Explorer ni par Opéra 8.5.

i. La pseudo-classe d'état d'élément d'interface :enabled
La pseudo-classe :enabled permet d'appliquer un style en fonction de l'tat actif d'un élément. Un élément est actif si l'utilisateur peut l'utiliser en le sélectionnant ou en lui transférant le focus.

C'est le cas par exemple des éléments de formulaire qui peuvent être disabled ou readonly (2).

La plupart des éléments ne sont pas concernés par ces pseudo-classes parce qu'ils ne sont ni actifs, ni inactifs. C'est le cas de tous les éléments qui ne permettent pas d'action de l'utilisateur, comme les éléments <p>, <div>, <ul>...

Sont considérées comme :enabled les éléments de formulaire ne disposant pas de l'attribut disabled, ainsi que les éléments disposant de l'attribut readonly alors que pourtant ils ne sont pas modifiables.
Exemple de pseudo-classe :enabled :
input:enabled {
        propriété :        valeur;
}


ii. La pseudo-classe d'état d'élément d'interface :disabled
La pseudo-classe :disabled est le pendant de la précédente. Elle permet d'appliquer un style en fonction de l'état inactif d'un élément. Un élément est inactif dans le cas où on lui a conféré l'attribut disabled.

Il existe cependant une différence avec :enabled, en effet celle ci s'applique aux éléments <option> alors que :disabled ne s'y applique pas.
Exemple de pseudo-classe :disabled :
input:disabled {
        propriété :        valeur;
}

info Pour le surplus la pseudo-classe :disabled partage les explications de son pendant, veuillez donc vous reporter aux explications données pour la pseudo-classe :enabled ci dessus.

iii. La pseudo-classe d'état d'élément d'interface :checked
La pseudo-classe :cheched s'applique spécifiquement aux boutons radios, aux cases à cocher et listes déroulantes des formulaires. Ces éléments ont la particularité de pouvoir être sélectionnés ou cochés. La pseudo-classe :checked permet alors d'appliquer un style lorsque ces éléments sont sélectionnés ou cochés.

Son application ne se limite pas à la seule activation par l'utilisateur de ces éléments. La pseudo-classe :checked est également mise en oeuvre lorsque ces éléments disposent de l'attribut checked, qui a pour objectif de rendre ces élements cochés ou sélectionnés par défaut, dès l'affichage de la page.
Exemple de pseudo-classe :checked :
select:checked {
        propriété :        valeur;
}


d. Les pseudo-classes diverses

Les pseudo-classes présentées ici ne sont pas classables dans les rubriques précédentes, elles se retrouvent donc dans cette rubrique fourre-tout... Ces pseudo-classes diverses sont au nombre de trois : ce sont la pseudo-classe :target, la pseudo-classe :lang, et la pseudo-classe :not.


i. La pseudo-classe :target
La pseudo-classe :target va s'appliquer aux cibles des ancres dans un document (X)HTML.

Une ancre est composée de deux éléments : un premier élément consistant en la cible du lien et appelé élément cible ; et le second élément qui est le lien renvoyant vers cet ancre. L'élément cible peut être crée via un attribut name ou id qu'on peut attribuer à la plupart des balises, tandis que le second peut être crée via l'attribut href sur une balise <a>.
Exemple de lien représentant une ancre :
<p>
  <a name="ancre">L'ancre se situe ici, cet élément sera stylisé par la pseudo-classe :target</a>.
</p>
...
<p>
  <a href="#ancre">lien vers l'ancre. En cliquant sur ce lien vous serez renvoyé vers le paragraphe ci dessus</a>
</p>
La pseudo-classe :target va attribuer un style à la première partie de l'ancre, c'est à dire à l'élément cible. En cliquant sur le lien de l'ancre, la pseudo-classe :target va appliquer le style au texte qui fait l'objet de l'élément cible. Une fois cliqué sur une autre ancre, le style passe du premier élément cible au second.


warning La pseudo-classe :target n'est pas gérée par Internet Explorer ni par Opéra 8.5.

ii. La pseudo-classe :lang()
Il est possible de spécifier un style en fonction de la langue qui est attribué à un élément. En (X)HTML la langue est déterminée par la combinaison de l'attribut lang, de l'élément meta (3) et d'informations venant du protocole (en-têtes HTTP par exemple).

La pseudo-classe :lang prend en argument un code linguistique comme spécifié par la spécification HTML 4.01 (4).
Exemple d'application de la pseudo-classe :lang :
:lang(X) {
        propriété :        valeur;
}
Dans cet exemple le style s'appliquera à tous les éléments dont la valeur de langue sera soit égale à l'identifiant X, soit débutera avec l'identifiant X, immédiatement suivi d'un tiret (-), suivi d'un autre identifiant quelconque. La recherche de correspondance entre l'identifiant X et la valeur de la langue se fait de manière insensible à la casse.

L'identifiant X ne doit pas forcément être un nom de langage valide. Par contre l'argument X ne doit pas être vide, sinon le sélecteur sera invalide.
Exemples de pseudo-classes :lang :
:lang(de) {
        propriété :        valeur;
}
html:lang(fr-ca) {
        propriété :        valeur;
}
La première déclaration s'appliquera à tous les éléments pour lesquels est déclaré exactement l'identifiant 'de' (ou 'DE'), ou ce même identifiant 'de' (ou 'DE') suivi d'un tiret et d'une autre valeur quelconque. La seconde déclaration s'appliquera à tous les éléments pour lesquels est déclaré exactement l'identifiant 'fr-ca' (ou 'FR-CA').


Cette pseudo-classe ressemble au sélecteur d'attribut [lang|="en"]. Cependant ce sélecteur d'attribut ne fait qu'une recherche sur l'existence de la valeur d'un attribut au sein d'une balise ; tandis que la pseudo-classe :lang se fonde sur le fait que la valeur de l'attribut lang est héritée aux enfants de l'élément pour lequel il est déclaré.
Exemple d'attribut lang qui est hérité :
<div lang="fr">
  <p>Ce paragraphe sera considéré comme écrit en langue française</p>
</div>
Dans cet exemple l'utilisation du sélecteur d'attribut [lang|="fr"] va sélectionner uniquement l'élément <div>. Alors que la pseudo-classe :lang(fr) sélectionnera autant l'élément <div> que l'élément <p>.


warning La pseudo-classe :lang() n'est pas gérée par Internet Explorer dans ses versions 6 et 7.

iii. La pseudo-classe :not()
La pseudo-classe :not est une pseudo-classe de négation, elle va sélectionner tous les éléments qui ne répondent pas à l'argument indiqué entre les parenthèses. La pseudo-classe va prendre comme argument un simple sélecteur à l'exception de la pseudo-classe :not elle même et des pseudo-éléments.
Exemple de pseudo-classe :not :
:not(div) {
        propriété :        valeur;
}
img:not([title]) {
        propriété :        valeur;
}
La première règle va appliquer son style à tous les éléments qui ne sont pas des balises <div>. La seconde règle va appliquer son style à toutes les images qui ne disposent pas de l'attribut title.


warning La pseudo-classe :not n'est pas gérée par Internet Explorer ni par Opéra 8.5.
 

Annexes : liste des sélecteurs et leurs compatibilités

Voici la liste de tous les sélecteurs et leur compatibilité :

Légende :

Les navigateurs sont affichés sous forme d'icones :

Les icones suivantes signifient une compatibilité partielle :

Les icones suivantes signifient une absence de compatibilité :

Sous chacune de ces icones sont affichés soit les noms des différents navigateurs quand ils sont compatibles avec le sélecteur, soit les versions concernées s'ils ne sont partiellement ou pas compatible.

Dans ce second cas les + et - signifient que le logo concerne la version indiquée ainsi que suivantes pour le signe + et les précédentes pour le signe -.
"3.5 +" concerne alors les versions 3.5 et supérieur. "3 -" concerne alors les versions 3 et inférieures.

Sélecteur Signification Compatibilité Specif CSS
Sélecteur universel
* tout élément
Firefox IE 6 et 7 IE 8 Opera Safari Chrome
2
Sélecteur de type
E tout élément de type E
Firefox IE Opera Safari Chrome
1
Sélecteur de classe et d'id
E.nomdelaclasse tout élément E pour lequel est déclaré l'attribut class avec comme valeur "nomdelaclasse" Compatible : FF2, FF3, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Partiel : IE6
Non compatible : /
1
E#nomdelid tout élément E pour lequel est déclaré l'attribut id avec comme valeur "nomdelid" Compatible : FF2, FF3, IE6, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : /
1
Sélecteur de filiation
E F un élément F qui est le descendant d'un élément E Compatible : FF2, FF3, IE6, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : /
1
E > F un élément F qui est le fils d'un élément E Compatible : FF2, FF3, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6
2
E + F un élément F immédiatement précédé par un élément E Compatible : FF2, FF3, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6
2
E ~ F un élément F précédé par un élément E Compatible : FF2, FF3, IE7, IE8, Op9.6, S3, S4, GC2
Non compatible : IE6, Op8.5
3
Sélecteur d'attribut
E[nomattribut] tout élément E possédant l'attribut 'nomattribut' Compatible : FF2, FF3, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6
2
E[nomattribut="valeur"] tout élément E possédant l'attribut 'nomattribut' avec comme valeur exacte 'valeur' Compatible : FF2, FF3, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6
2
E[nomattribut~="valeur"] tout élément E possédant l'attribut 'nomattribut' avec comme valeur une liste d'éléments séparés par des espaces dont au moins l'un d'entre eux vaut exactement 'valeur' Compatible : FF2, FF3, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6
2
E[nomattribut|="fr"] tout élément E dont l'attribut 'nomattribut' est une liste séparées par des tirets qui commence à gauche par 'fr' Compatible : FF2, FF3, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6
2
E[nomattribut^="valeur"] tout élément E possédant l'attribut 'nomattribut' dont la valeur commence exactement par la chaine 'valeur' Compatible : FF2, FF3, IE7, IE8, Op9.6, S3, S4, GC2
Non compatible : IE6, Op8.5
3
E[nomattribut$="valeur"] tout élément E possédant l'attribut 'nomattribut' dont la valeur se termine exactement par la chaine 'valeur' Compatible : FF2, FF3, IE7, IE8, Op9.6, S3, S4, GC2
Non compatible : IE6, Op8.5
3
E[nomattribut*="valeur"] tout élément E possédant l'attribut 'nomattribut' dont la valeur contient la sous-chaine 'valeur' Compatible : FF2, FF3, IE7, IE8, Op9.6, S3, S4, GC2
Non compatible : IE6, Op8.5
3
Pseudo-éléments
E::first-line la première ligne formatée d'un élément E Compatible : FF2, FF3, IE6, Op8.5, Op9.6, S3, S4, GC2
Partiel : IE7**, IE8**
Non compatible : /
1
E::first-letter le premier caractère formaté d'un élément E Compatible : FF2, FF3, IE6, Op8.5, Op9.6, S3, S4, GC2
Partiel : IE7**, IE8**
Non compatible : /
1
E::before le contenu généré avant un élément E Compatible : FF2, FF3,Op8.5, Op9.6, S3, S4, GC2
Partiel : IE8**
Non compatible : IE6, IE7
2
E::after le contenu généré après un élément E Compatible : FF2, FF3, Op8.5, Op9.6, S3, S4, GC2
Partiel : IE8**
Non compatible : IE6, IE7
2
Pseudo-classes
  - Les pseudo-classes dynamiques :
E:link un élément E correspondant à un lien dont la source n'a pas encore été visitée (:link) Compatible : FF2, FF3, FF3.5, IE6, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : /
1
E:visited un élément E correspondant à un lien dont la source a déjà été visitée (:visited) Compatible : FF2, FF3, FF3.5, IE6, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : /
1
E:hover un élément E que le pointeur de la souris est en train de survoler (:hover) Compatible : FF2, FF3, FF3.5, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Partiel : IE6
Non compatible : /
2
E:active un élément E sur lequel l'utilisateur est en train de cliquer sans qu'il ait encore relaché le bouton de la souris (:active) Compatible : FF2, FF3, FF3.5, IE8, Op8.5, Op9.6, S3, S4, GC2
Partiel : IE6, IE7 ****
Non compatible : /
1
E:focus un élément E qui as le focus, c'est à dire qui accepte les événements effectués à partir tout élément de pointage (:focus) Compatible : FF2, FF3, FF3.5, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7
2
  - Les pseudo-classes structurelles :
E:first-child un élément E, premier enfant de son parent Compatible : FF2, FF3, FF3.5, IE7, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6
2
E:last-child un élément E, dernier enfant de son parent Compatible : FF2, FF3, FF3.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7, IE8, Op8.5
3
E:first-of-type un élément E, premier enfant de son type dans la liste des enfants de son élément parent
Firefox 3 - Firefox 3.5 + IE Opera 8 Opera 9 + Safari Chrome
3
E:last-of-type un élément E, dernier enfant de son type dans la liste des enfants de son élément parent
3 - 3.5 + IE 8 - 9 + Safari Chrome
3
E:only-child un élément E, seul enfant de son parent
3 - 3.5 + IE 8 9 + Safari Chrome
3
E:only-of-type un élement E, seul enfant de son type dans la liste des enfants de son élément parent Compatible : FF3.5, Op9.6, S3, S4, GC2
Non compatible : FF2, FF3, IE6, IE7, IE8, Op8.5
3
E:root un élément E, racine du document Compatible : FF2, FF3, FF3.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7, IE8, Op8.5
3
E:nth-child(n) un élément E qui est le nième enfant de son parent Compatible : FF3.5, Op9.6, S3, S4, GC2
Non compatible : FF2, FF3, IE6, IE7, IE8, Op8.5
3
E:nth-last-child(n) un élément E qui est le nième enfant de son parent en comptant depuis le dernier enfant Compatible : FF3.5, Op9.6, S3, S4, GC2
Non compatible : FF2, FF3, IE6, IE7, IE8, Op8.5
3
E:nth-of-type(n) un élément E qui est le nième enfant de son parent et de ce type Compatible : FF3.5, Op9.6, S3, S4, GC2
Non compatible : FF2, FF3, IE6, IE7, IE8, Op8.5
3
E:nth-last-of-type(n) un élément E qui est le nième enfant de son parent et de ce type en comptant depuis le dernier enfant Compatible : FF3.5, Op9.6, S3, S4, GC2
Non compatible : FF2, FF3, IE6, IE7, IE8, Op8.5
3
E:empty un élément E qui n'a aucun enfant (y compris du contenu textuel) Compatible : FF2, FF3, FF3.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7, IE8, Op8.5
3
  - Les pseudo-classes d'état d'élément d'interface :
E:enabled un élément d'interface utilisateur E qui est actif Compatible : FF2, FF3, FF3.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7, IE8, Op8.5
3
E:disabled un élément d'interface utilisateur E qui est inactif Compatible : FF2, FF3, FF3.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7, IE8, Op8.5
3
E:checked un élément d'interface utilisateur E qui est coché Compatible : FF2, FF3, FF3.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7, IE8, Op8.5
3
  - Les pseudo-classes diverses :
E:target un élément E qui est la cible de l'URL d'origine contenant une ancre Compatible : FF2, F3, FF3.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7, IE8, Op8.5
3
E:lang(fr) un élément dont le langage est 'fr' Compatible : FF2, FF3, FF3.5, IE8, Op8.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7
2
E:not(s) un élément E qui ne permet pas de sélectionner le sélecteur simple 's' Compatible : FF2, FF3, FF3.5, Op9.6, S3, S4, GC2
Non compatible : IE6, IE7, IE8, Op8.5
3

IE7* : vérificaztion de IE7 avec IE8 en mode de compatibilité

** Internet Explorer 7 et 8 ne gèrent pas l'écriture des pseudo-éléments avec les deux double points.

*** pour safari 4 refaire avec version à jour car testé avec la beta

**** IE 7 en fait laisse le lien en active même après avoir relaché le bouton de la souris... Et ne le comprends que sur un lien, et pas sur les autres éléments.


Remerciements

Le prochain article sera consacré à l'étude des notions de cascade et d'héritage.

Tous mes remerciements vont à ....

Commentez cet article : Commentez Donner une note à l'article (0)

 

            
Tous les articles de cette série sur CSS :
Le sommaire

Introduction aux CSS
La syntaxe d'une règle CSS


(1) Qu'est ce qu'une valeur passée par l'URL : fr Passage de variables dans une URL.
(2) Pour plus de renseignement sur disabled et readonly vous pouvez vous référer à ce tutoriel : fr les bases du HTML : les attributs de formulaire disabled et readonly
(3) Voir : Les bases du HTML : les explications sur la balise meta content-type
(4) Un lien vers cette spécification : fr Les codes de langue dans la spécification HTML 4.01

Valid XHTML 1.0 TransitionalValid CSS!

Copyright © 2011 Christophe F.. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Responsable bénévole de la rubrique CSS : Xavier Lecomte -