2 Sélecteurs 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 ;
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 premiè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%;} <h1><first-letter>s</first-letter>alut tout l monde! Je suis vraiment content!</h1> 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.
Sélecteurs Chapitre 2 33 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 : <a href="http://example.com/law.html#sec2-7">section 2.7</a> Pour peu que le navigateur se comporte correctement, quiconque suit ce lien arrivera non seulement sur la page ciblée, mais également à l endroit de la page où apparaît l identifiant de fragment (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 : <h3><a name="sec2-7">un plein de nutrimines!</a></h3> <h3 id="sec2-7">un plein de nutrimines!</h3> Dans les deux cas, bien que le navigateur se place sur le point adéquat du document, aucun indicateur 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;}
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.
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 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é. Considé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 */ <div id="header" style="background: blue;"> <!-- 1,0,0,0 -->
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 à textdecoration: 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;} <div id="gohome"><a id="home" href="/">accueil</a></div> 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 totalement 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 importante 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;}
Sélecteurs Chapitre 2 37 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.
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, borderstyle, 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éfinir 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;
Sélecteurs Chapitre 2 39 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 établir 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 remplacements 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.
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 : <div> <h1>salut!</h1> <p>je suis un <em>paragraphe</em>.</p> <ol> <li>un</li> <li>deux</li> <li>trois</li> </ol> </div> La solution est simple : div * {border: 1px solid red;}