sélecteurs - Pearson · Sélecteurs Chapitre 2 35 Ne paniquez pas, tout au moins pas encore ! Commençons par étudier quelques exemples. div ul ul li 0,0,0,4 Quatre descripteurs

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


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



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



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



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



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



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



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%;}



/* 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



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


Documents

sélecteurs - Pearson · Sélecteurs Chapitre 2 35 Ne paniquez pas, tout au moins pas encore ! Commençons par étudier quelques exemples. div ul ul li 0,0,0,4 Quatre descripteurs