-
sélecteurs2
Les sélecteurs constituent véritablement le cœur de CSS. Sans
eux, il est impossible d’affecter des styles aux éléments, hormis
en les plaçant directement dans leur attribut style, mais cette
méthode est très lourde. Grâce à cette capacité de sélection des
types ou des familles d’éléments auxquels les styles doivent être
appliqués, nous pouvons effectuer cette opération en quelques
lignes de code CSS.
Dans ce chapitre, nous détaillons l’usage intelligent des
sélecteurs et présentons un large éventail des sélecteurs reconnus
et fréquemment employés.
Pseudo-…
En CSS, le terme pseudo se rencontre dans deux concepts :
les pseudo-classes et les pseudo-éléments. Voici les pseudo-classes
de CSS2.1 :•. :link. Un lien non visité.
•. :visited. Un lien visité.
•. :hover. Un élément survolé.
•. :focus. Un élément cible du focus.
•. :active. Un élément actif (comme un lien lorsque l’internaute
clique dessus).
•. :first-child. Un élément qui représente le premier enfant
d’un autre élément.
•. :lang(). Un élément choisi en fonction de la valeur de son
attribut lang.
Voici les pseudo-éléments de CSS2.1 :•
::first-line ;
• ::first-letter ;
Livre 1.indb 31 01/06/2011 14:11:13
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
32 CSS – Techniques professionnelles pour une mise en page
moderne
• ::before ;
• ::after.
Quelles sont les différences ? Elles concernent la manière
dont les “pseudo-choses” affectent le document. Dans le cas d’une
pseudo-classe, cela revient à ajouter une classe au document. Dans
le cas d’un pseudo-élément, il s’agit d’un élément inséré dans le
document.
Prenons comme exemple ::first-letter. Supposons que vous vouliez
faire en sorte que la pre-mière lettre de chaque élément h1 soit
deux fois plus grande que la suite du texte (voir Figure 2.1).
Rien de plus simple :
h1::first-letter {font-size: 250%;}
Cela revient à modifier le CSS et le balisage de la manière
suivante :
h1 first-letter {font-size: 250%;}
Salut tout l’monde !
Je suis vraiment content !
Figure 2.1 : Agrandir la première lettre d’un élément h1.
Cette transformation se produit-elle vraiment au sein du
navigateur ? Qui sait ? Nous savons simplement que le
résultat équivaut à cette opération, d’où le nom de
pseudo-élément.
De la même manière, les pseudo-classes agissent comme si des
classes étaient ajoutées aux élé-ments du document. Imaginez par
exemple qu’un navigateur ait attribué la classe first-child à
chaque élément qui est le premier enfant d’un autre élément. Dans
ce cas, vous pouvez appliquer un style à ces éléments à l’aide de
la règle suivante :
li.first-child {border-left: none;}
En remplaçant simplement le point par des deux-points,
c’est-à-dire en écrivant li:first-child, vous obtenez le même
résultat final sans avoir à ajouter des classes dans l’intégralité
du document.
Vous avez probablement remarqué que la syntaxe des
pseudo-éléments se fonde sur des doubles deux-points. Elle a été
introduite après CSS2.1. Au moment de l’écriture de ces lignes,
aucun navigateur ne vous oblige à employer les doubles deux-points
avant les pseudo-éléments : un seul suffit.
Livre 1.indb 32 01/06/2011 14:11:13
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
33Sélecteurs Chapitre 2
Sachez que CSS3 ajoute les pseudo-classes suivantes (la plupart
des nouvelles générations de navigateurs commencent à les
reconnaître car l’adoption de cette norme se généralise) :
• :target ;
• :root ;
• :nth-child() ;
• :nth-of-type() ;
• :nth-last-of-type() ;
• :first-of-type ;
• :last-of-type ;
• :only-of-type ;
• :only-child ;
• :last-child ;
• :empty ;
• :not() ;
• :enabled ;
• :disabled ;
• :checked.
Des cibles qui ont du style
Les liens vers des identifiants de fragments d’un document sont
très utiles. Qu’est-ce que cela veut dire ? Rien d’autre que
ceci :
Section 2.7
Pour peu que le navigateur se comporte correctement, quiconque
suit ce lien arrivera non seule-ment sur la page ciblée, mais
également à l’endroit de la page où apparaît l’identifiant de
frag-ment (la partie #sec2-7). Une ancre est souvent employée dans
ce but, mais il est préférable d’utiliser un identifiant. Voici les
deux versions :
Un plein de nutrimines !
Un plein de nutrimines !
Dans les deux cas, bien que le navigateur se place sur le point
adéquat du document, aucun indi-cateur visuel ne vous permet de
savoir que cette opération a lieu. Avec la pseudo-classe :target,
il est possible de fournir un indice. Par exemple, si vous
souhaitez signaler que tout élément h3 est la cible d’un
identifiant de fragment (voir Figure 2.2), écrivez la règle
suivante :
h3:target {color: maroon;
background: #FFA;}
Livre 1.indb 33 01/06/2011 14:11:13
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
34 CSS – Techniques professionnelles pour une mise en page
moderne
Figure 2.2 : Mise en exergue d’un élément ciblé.
Bien entendu, vous pourriez souhaiter appliquer ce style à tout
élément qui constitue une cible, quel qu’il soit. Pour cela, il
suffit de retirer la partie h3 et de la remplacer par le sélecteur
universel :
*:target {color: maroon;
background: #FFA;}
Techniquement, le sélecteur universel est facultatif dans ce
cas ; le sélecteur peut se limiter à :target.
Pour que le style appliqué à une cible suive un design
Web 2.0, vous pouvez ajouter un fond en dégradé. Le but est
d’informer l’internaute qu’il a effectué une certaine action en
faisant passer une partie de l’arrière-plan de la page du jaune au
blanc. Pour cela, la pseudo-classe :target et un GIF animé
suffisent. Créez l’animation qui passe du jaune au blanc (si cette
couleur est celle de l’arrière-plan de votre site) et utilisez-la
en image de fond :
*:target {background: url(/img/yellow-fade.gif);}
Spécificité
Ce mot est difficile à répéter trois fois de suite rapidement,
mais il est encore plus difficile d’en maîtriser parfaitement le
sens. Pourtant, il est essentiel à la compréhension des
interactions entre les règles CSS.
La spécificité est une représentation numérique du niveau de
priorité d’un sélecteur. Elle prend en compte trois
facteurs :
• Chaque descripteur d’élément ajoute 0,0,0,1.
• Chaque descripteur de classe, de pseudo-classe ou d’attribut
ajoute 0,0,1,0.
• Chaque descripteur d’identifiant ajoute 0,1,0,0.
Livre 1.indb 34 01/06/2011 14:11:14
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
35Sélecteurs Chapitre 2
Ne paniquez pas, tout au moins pas encore ! Commençons par
étudier quelques exemples.
div ul ul li 0,0,0,4 Quatre descripteurs d'éléments
div.aside ul li 0,0,1,3 Un descripteur de classe, trois
descripteurs d'éléments
a:hover 0,0,1,1 Un descripteur de pseudo-classe, un descripteur
d'élément
div.navlinks a:hover 0,0,2,2 Un descripteur de pseudo-classe, un
descripteur de classe, deux descripteurs d'éléments
#title em 0,1,0,1 Un descripteur d'identifiant, un descripteur
d'élément
h1#title em 0,1,0,2 Un descripteur d'identifiant, deux
descripteurs d'éléments
Vous devriez commencer à comprendre la manière dont les valeurs
de spécificité se construisent. Mais pourquoi mettre des
virgules ? Simplement parce que chaque “partie” d’une valeur
de spé-cificité agit en quelque sorte de manière indépendante.
Ainsi, un sélecteur qui comprend un seul descripteur de classe a un
niveau de spécificité plus élevé qu’un sélecteur qui comprend
treize descripteurs d’éléments :
.aside /* 0,0,1,0 */
div table tbody tr td div ul li ol li ul li pre /* 0,0,0,13
*/
Le “1” placé en troisième position dans le premier sélecteur
l’emporte sur le “0” en troisième position dans le second
sélecteur. Par conséquent, le “13” en quatrième position dans le
second sélecteur n’intervient pas (dans cet exemple simple). Les
virgules facilitent cette interprétation ; si elles étaient
omises, les spécificités des sélecteurs s’écriraient “10” et “13”,
ce qui pousserait à croire que le dernier est plus spécifique
(c’était le cas aux premiers jours de CSS, avant que la notation à
virgules ne soit mise en place).
Par ailleurs, on pense souvent, à tort, que la proximité
structurelle influe sur la spécificité. Consi-dérons par exemple
les deux règles suivantes :
ul li {font-style: normal;}
html li {font-style: italic;}
Laquelle est prioritaire ? Puisqu’elles comprennent deux
descripteurs d’éléments, elles ont toutes deux une spécificité
égale à 0,0,0,2. Dans ce cas, la dernière règle écrite l’emporte.
Le fait que l’élément ul soit, au sein de la structure du document,
plus proche de l’élément li que de l’élé-ment html n’a absolument
aucune importance. La spécificité est une valeur numérique pure. La
structure de la page n’entre pas en ligne de compte. Puisque la
dernière règle l’emporte en cas d’égalité des spécificités, les
éléments de liste sont donc affichés en italique.
Nous avons précisé que trois facteurs contribuent à la
spécificité. Alors, à quoi sert le premier zéro dans la valeur de
spécificité ? Il est utilisé uniquement avec les styles en
ligne. Avec la règle et le balisage suivants, l’arrière-plan du div
est bleu :
div#header {background: purple;} /* 0,1,0,0 */
Livre 1.indb 35 01/06/2011 14:11:14
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
36 CSS – Techniques professionnelles pour une mise en page
moderne
Importance
Lorsqu’une déclaration doit l’emporter sur toute autre
considération, elle est !important. Si vous êtes un programmeur, ne
vous méprenez pas : cette notation ne signifie pas “non
important”.
Vous pouvez marquer n’importe quelle déclaration individuelle
comme importante. En voici un exemple :
a:hover {color: red !important; text-decoration: none;}
Dans ce cas, la déclaration color: red est indiquée comme
importante, contrairement à text-decoration: none. Chaque
déclaration importante doit être marquée par son propre terme
!important.
En bref, une déclaration importante l’emporte sur toute autre
déclaration non importante. Avec les déclarations suivantes, le
lien est affiché en vert :
div#gohome a#home {color: red;}
div a {color: green !important;}
Accueil
Le niveau élevé de spécificité de la première règle (0,2,0,2)
n’entre pas en ligne de compte dans la résolution de ce conflit sur
les couleurs, car le terme !important gagne à tous les coups.
Bien entendu, si la première règle comprenait une marque
d’importance, la situation serait tota-lement différente :
div#gohome a#home {color: red !important;}
div a {color: green !important;}
Puisque les deux déclarations de couleur sont importantes, le
conflit est résolu conformément aux règles habituelles de la
cascade. Autrement dit, la spécificité est de nouveau de mise et le
lien est affiché en rouge.
L’usage de !important ne doit pas se faire sans réflexion. Si
vous commencez à l’utiliser pour écraser des règles, vous risquez
d’être confronté au cas où vous devrez écraser une règle
impor-tante par d’autres déclarations !important, qui nécessiteront
d’autres déclarations !important, etc. Toutes vos déclarations
seront importantes et, par conséquent, aucune ne le sera.
Omission d’un mot clé
Nous avons l’habitude d’employer les formes courtes d’écriture
des propriétés : background, border, font, margin et padding
sont parmi les plus répandus. Ils permettent d’exprimer en une fois
et de manière compacte plusieurs déclarations de style. Mais que se
passe-t-il si l’un des mots clés est oublié ? Examinons le cas
suivant :
strong {font: bold italic small-caps medium/1.2 Verdana,
sans-serif;}
Livre 1.indb 36 01/06/2011 14:11:14
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
37Sélecteurs Chapitre 2
La Figure 2.3 le montre, les éléments strong sont affichés
en gras et en italique, dans une police Verdana (ou toute autre
police sans empattement), avec une taille moyenne, en petites
capitales et avec une hauteur de ligne de 1.2.
Figure 2.3 : C’est fort !
Supposons que nous réduisions la règle de la manière
suivante :
strong {font: medium Verdana, sans-serif;}
Nous obtenons un texte en police Verdana (ou toute autre police
sans empattement si Verdana n’est pas disponible) de taille
moyenne, avec une graisse normale. La mise en gras a disparu (voir
Figure 2.4).
Figure 2.4 : Mise en gras supprimée par erreur.
Lorsque certaines parties d’une propriété de raccourci sont
omises, les éléments manquants sont remplacés par les valeurs par
défaut des propriétés correspondantes. Par conséquent, l’absence de
valeur pour la graisse, le style et la variante de la police
conduit en réalité à la règle suivante :
strong {font: normal normal normal small/normal Verdana,
sans-serif;}
Vous le constatez, même la propriété line-height est fixée à sa
valeur par défaut et elle peut écraser toute valeur de hauteur de
ligne héritée.
Livre 1.indb 37 01/06/2011 14:11:15
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
38 CSS – Techniques professionnelles pour une mise en page
moderne
Si vous ne faites pas attention à la déclaration des styles,
vous risquez de rencontrer quelques problèmes. Considérons les deux
règles suivantes. La première est issue d’une feuille de style
globale au site, la seconde, de styles incorporés à une
page :
body {background: #FCC url(/img/page-bg.gif) 10px 25% no-repeat
fixed;}
body {background: url(/img/body-bg.gif);}
D’après ces deux règles, l’arrière-plan de la page en question
est rempli avec une image répétée à partir du coin supérieur gauche
et qui défile avec la page. En effet, la seconde règle équivaut à
celle-ci :
body {background: transparent url(/img/body-bg.gif) 0 0 repeat
scroll;}
Si vous souhaitiez ce résultat, alors, vous avez employé la
bonne manière. Toutefois, il est plus probable que l’objectif était
de remplacer une image par une autre. Dans ce cas, vous devez fixer
la valeur de la propriété spécifique :
body {background-image: url(/img/ body-bg.gif);}
C’est ainsi que fonctionnent la plupart des formes courtes, mais
margin, padding, border-style, border-width et border-color font
exception. Dans ce cas, les valeurs manquantes sont déduites à
partir des valeurs fournies. Voici une liste de déclarations
fonctionnellement identiques :
margin: 1em; margin: 1em 1em 1em 1em;
padding: 10px 25px; padding: 10px 25px 10px 25px;
border-color: red green blue; border-color: red green blue
green;
Les valeurs sont données dans l’ordre TRBL, c’est-à-dire top
(haut), right (droite), bottom (bas) et left (gauche) ; pour
vous en souvenir, partez du haut et avancez dans le sens des
aiguilles d’une montre.
Prépondérance sélective des propriétés
Certes, les valeurs non déclarées dans les propriétés de
raccourci sont remplacées par des valeurs par défaut, mais ce n’est
pas là une raison pour ne pas les employer. En réalité, il peut
être utile de déclarer 80 % du style souhaité sous forme
courte et de surcharger ensuite certaines valeurs dans des
propriétés spécifiques pour obtenir les 20 % restants.
Supposons que vous souhaitiez appliquer une bordure large de
trois pixels, en pointillé et en noir sur trois côtés d’un élément,
mais en rouge sur le quatrième (voir Figure 2.5). Vous pouvez
défi-nir le style de chaque côté individuellement, mais cette
solution est un tantinet répétitive. À la place, il est préférable
d’opter pour les déclarations suivantes :
border: 3px dotted black;
border-left-color: red;
Livre 1.indb 38 01/06/2011 14:11:15
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
39Sélecteurs Chapitre 2
Figure 2.5 : Mettre en rouge un seul côté de la bordure.
De cette manière, vous pouvez ajuster uniquement la petite
partie qui doit être différente du reste. Mieux encore, vous pouvez
le faire au sein de la même règle.
Les titres constituent un autre exemple courant de l’écrasement
sélectif des propriétés. En géné-ral, ils ont de nombreuses
caractéristiques de style en commun, à l’exception de la taille de
police. Si les tailles par défaut fixées par le navigateur vous
satisfont, vous pouvez alors simplement éta-blir les règles
suivantes :
h1, h2, h3, h4, h5, h6 {font-weight: normal;
font-style: italic;
font-family: Helvetica, sans-serif;
line-height: 1.5;}
En revanche, si vous souhaitez donner aux titres vos propres
tailles (voir Figure 2.6), procédez à quelques
réorganisations :
h1, h2, h3, h4, h5, h6 {font: italic 100%/1.5 Helvetica,
sans-serif;}
h1 {font-size: 225%;}
h2 {font-size: 185%;}
h3 {font-size: 140%;}
/* etc. */
Lorsque vous mettez en place ce type d’écrasement sélectif, vous
devez vérifier que les remplace-ments viennent après la propriété
de raccourci. De cette manière, si (comme c’est souvent le cas) les
sélecteurs ont des spécificités égales, les surcharges
l’emporteront sur les formes courtes.
Livre 1.indb 39 01/06/2011 14:11:15
© 2011 Pearson Education France – CSS – Eric A. Meyer
-
40 CSS – Techniques professionnelles pour une mise en page
moderne
Figure 2.6 : Fixer rapidement les tailles des titres par un
écrasement sélectif.
Sélection universelle
Nous allons à présent examiner l’usage de l’astérisque (*) dans
les sélecteurs. En voici un exemple simple :
* {color: blue;}
L’astérisque est appelé sélecteur universel. En effet, il
sélectionne tous les éléments du document et leur applique les
styles déclarés.
Il ressemble à un joker et d’une certaine manière il en est un,
car il permet de sélectionner un ensemble d’éléments sans les
nommer directement. Par exemple, supposons que vous souhaitiez
sélectionner tous les éléments contenus dans un div :
Salut !
Je suis un paragraphe.
Un
Deux
Trois
La solution est simple :
div * {border: 1px solid red;}
Livre 1.indb 40 01/06/2011 14:11:15
© 2011 Pearson Education France – CSS – Eric A. Meyer