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 à ....
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
 |
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 :
-
Deux séquences de sélecteurs simples :
-
Six sélecteurs simples :
- div
- .header
- h2
- p
- #intro
- span
-
Et deux type de combinateurs :
- le combinateur 'espace' entre div.header h2 et entre
p#intro span.
- le combinateur > 'supérieur à'.
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
 |
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>
|
|
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;
}
|
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 : |
|
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 :
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>.
|
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.
|
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.
|
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" />
|
|
Vous pouvez vous référer à ce cours pour un complément d'informations :  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.
|
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>
<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.
|
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.
|
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>.
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.
-
Les deux premiers, :link et :visited, sont des pseudo-classes de liens et s'appliquent donc exclusivement aux liens :
-
La pseudo-classe :link s'applique aux liens hypertexte non visités.
-
La pseudo-classe :visited s'applique aux liens hypertexte qui ont été visités.
-
Les trois autres, :active, :hover et :focus, sont des pseudo-classes d'action et s'appliquent à tous les éléments permettant
une interaction avec l'utilisateur :
-
La pseudo-classe :hover permet d'appliquer un style aux éléments qui sont survolés par le pointeur de la souris.
-
La pseudo-classe :active permet d'appliquer un style aux éléments sur lesquels l'utilisateur est en train de cliquer.
-
La pseudo-classe :focus permet d'appliquer un style aux éléments qui ont le focus, c'est à dire quand ils acceptent les
événements effectués à partir du clavier ou de la souris...
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;
}
|
|
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;
}
|
|
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;
}
|
|
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.
 |
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.
|
|
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>
|
|
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.
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>.
|
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)
:nth-child(3)
|
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)
td:nth-child(n+0)
td:nth-child(n)
td
|
| Exemples de la pseudo-classe :nth-child avec a valant 1 associé à différentes valeurs de b : |
td:nth-child(1n+0)
td:nth-child(1n+1)
td:nth-child(1n+2)
td:nth-child(1n+5)
|
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)
p:nth-child(3n)
p:nth-child(4n)
|
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.
|
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)
p:nth-child(0)
p:nth-child()
p:nth-child(n)
|
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)
li:nth-child(even)
|
|
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)
li:nth-last-child(3)
|
|
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.
|
|
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.
|
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.
|
|
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;
}
|
|
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.
|
|
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>
<p> </p>
<p>Du texte dans un paragraphe</p>
<p><em></em></p>
<p>
<em>
Du texte dans des balises <em> et dans un paragraphe
</em>
</p>
|
|
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.
|
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;
}
|
|
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.
|
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>.
|
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.
|
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 :
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 à ....
Copyright © 2011 Christophe F..
Aucune reproduction, même partielle, ne peut être faite
de ce site ni 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.
