Les sélecteurs
Les sélecteurs CSS permettent de cibler des éléments spécifiques dans un document HTML pour leur appliquer des styles. Parmi les sélecteurs les plus courants, on retrouve le sélecteur de type, qui cible les balises HTML directement, comme h1, p, ou div. Par exemple, le sélecteur p { color: blue; } stylisera tous les paragraphes du document en bleu. Ce type de sélecteur est simple, mais il s'applique de manière globale, ce qui peut limiter sa précision.
Pour cibler des éléments de manière plus précise, on utilise les sélecteurs de classe (.nomDeClasse) et d'identifiant (#nomIdentifiant). Les classes sont utilisées pour styliser plusieurs éléments partageant une même caractéristique, tandis que les identifiants sont uniques pour chaque élément. Par exemple, .highlight { background-color: yellow; } coloriera en jaune tous les éléments avec la classe highlight. De son côté, #main-title { font-size: 24px; } stylisera spécifiquement l'élément ayant l'identifiant main-title.
Les sélecteurs combinés permettent de cibler des éléments en fonction de leur relation avec d'autres éléments dans le DOM. Par exemple, le sélecteur descendant (div p) cible les paragraphes qui se trouvent à l'intérieur d'une div. Le sélecteur enfant direct (div > p), quant à lui, cible uniquement les paragraphes qui sont directement enfants d'une div. Ces sélecteurs sont utiles pour appliquer des styles dans des contextes spécifiques tout en évitant d'affecter d'autres éléments similaires ailleurs sur la page.
Les pseudo-classes offrent des possibilités supplémentaires pour cibler des éléments en fonction de leur état ou position. Par exemple, :hover s'applique lorsqu'un utilisateur survole un élément avec sa souris, comme dans a:hover { color: red; }. D'autres pseudo-classes comme :first-child ou :nth-child(2) permettent de cibler des éléments en fonction de leur position dans leur conteneur. Ces sélecteurs permettent de créer des styles dynamiques et adaptatifs sans nécessiter de JavaScript.
Les sélecteurs d'attributs permettent de cibler des éléments en fonction des attributs qu'ils possèdent, et parfois même de leurs valeurs. Par exemple, [type="text"] stylisera uniquement les champs de formulaire ayant l'attribut type="text". On peut également utiliser des variantes comme [href^="https"] pour cibler les liens commençant par "https" ou [alt$=".jpg"] pour cibler les images dont l'attribut alt se termine par ".jpg". Ces sélecteurs sont particulièrement utiles pour manipuler des éléments de manière contextuelle dans des pages complexes.
L'un des principaux avantages du CSS est sa capacité à appliquer facilement un ensemble de styles à tous les éléments du même type. Vous n'êtes pas impressionné ? Considérez ceci : en modifiant une seule ligne de CSS, vous pouvez modifier les couleurs de tous vos titres. Vous n'aimez pas le bleu que vous utilisez ? Modifiez cette ligne de code et ils peuvent tous être violets, jaunes, marron ou toute autre couleur de votre choix.
Cette capacité vous permet, en tant qu'auteur, de vous concentrer sur la conception et l'expérience utilisateur plutôt que sur des opérations fastidieuses de recherche et de remplacement. La prochaine fois que vous êtes en réunion et que quelqu'un veut voir des titres avec une nuance de vert différente, modifiez simplement votre style et appuyez sur Recharger. Et voilà ! Les résultats sont obtenus en quelques secondes et sont visibles par tous.
Règles de style de base
Comme indiqué, une caractéristique centrale du CSS est sa capacité à appliquer certaines règles à un ensemble complet de types d'éléments dans un document. Par exemple, disons que vous souhaitez que le texte de tous les éléments <h3> apparaisse en gris. Avant l'arrivée du CSS, vous deviez le faire en insérant des balises <font color="gray">...</font> dans tous vos éléments <h3>. L'application de styles en ligne à l'aide de l'attribut style, qui est également une mauvaise pratique, vous obligerait à inclure style="color: gray;" dans tous vos éléments <h3>, comme ceci :
- <h3 style="color: gray;">Ceci est un texte h3</h3>
Ce processus sera fastidieux si votre document contient beaucoup d'éléments <h3>. Pire encore, si vous décidez plus tard que vous voulez que tous ces éléments <h3> soient verts au lieu de gris, vous devrez recommencer le balisage manuel.
CSS vous permet de créer des règles simples à modifier, éditer et appliquer à tous les éléments de texte que vous définissez (la section suivante explique comment fonctionnent ces règles). Par exemple, vous pouvez écrire cette règle une fois pour rendre tous vos éléments <h3> gris :
- h3 {color: gray;}
Sélecteurs de type
Un sélecteur de type, auparavant appelé sélecteur d'élément, est le plus souvent un élément HTML, mais pas toujours. Par exemple, si un fichier CSS contient des styles pour un document XML, les sélecteurs de type peuvent ressembler à ceci :
En d'autres termes, les éléments du document sont les types de noeuds sélectionnés. En XML, un sélecteur peut être n'importe quoi, car XML permet la création de nouveaux langages de balise pouvant avoir à peu près n'importe quoi comme nom d'élément. Si vous stylisez un document HTML, le sélecteur sera généralement l'un des nombreux éléments HTML définis tels que <p>, <h3>, <em>, <a> ou même <html> lui-même. Par exemple :
Regroupement
Jusqu'ici, vous avez vu des techniques assez simples pour appliquer un style unique à un sélecteur unique. Mais que faire si vous souhaitez que le même style s'applique à plusieurs éléments ? Le regroupement permet à un auteur de compacter considérablement certains types d'affectations de style, ce qui permet d'obtenir une feuille de style plus courte.
Regroupement de sélecteurs
Supposons que vous souhaitiez que les éléments <h3> et les paragraphes aient du texte bleu. Le moyen le plus simple d'y parvenir est d'utiliser la déclaration suivante :
- h3, p {color: blue;}
En plaçant les sélecteurs h2 et p au début de la règle, avant l'accolade ouvrante, et en les séparant par une virgule, vous avez défini une règle indiquant que le style à l'intérieur des accolades (couleur : gris ;) s'applique aux éléments référencés par les deux sélecteurs. La virgule indique au navigateur Web que deux sélecteurs différents sont impliqués dans la règle. L'omission de la virgule donnerait à la règle une signification complètement différente.
Ces alternatives produisent exactement le même résultat, mais l'une est beaucoup plus facile à saisir :
La deuxième alternative, avec un sélecteur groupé, est également beaucoup plus facile à maintenir au fil du temps.
Le sélecteur universel
Le sélecteur universel, affiché sous la forme d'un astérisque (*), correspond à n'importe quel élément, à la manière d'un caractère générique. Par exemple, pour mettre en gras tous les éléments d'un document, vous devez écrire ceci :
- * {font-weight: bold;}
Cette déclaration est équivalente à un sélecteur groupé répertoriant tous les éléments contenus dans le document. Le sélecteur universel vous permet d'attribuer la valeur de poids de police de caractères bold à chaque élément du document en un seul geste efficace. Attention cependant : bien que le sélecteur universel soit pratique car il cible tout ce qui se trouve dans la portée de sa déclaration, il peut avoir des conséquences inattendues.
Regroupement des déclarations
Tout comme vous pouvez regrouper des sélecteurs dans une seule règle, vous pouvez également regrouper des déclarations. En supposant que vous souhaitiez que tous les éléments <h2> apparaissent en texte Helvetica bleu alice de 18 pixels de haut sur un fond turquoise (et que cela ne vous dérange pas d'aveugler vos lecteurs), vous pouvez écrire vos styles comme ceci :
- h2 {font: 18px Helvetica;}
- h2 {color: aliceblue;}
- h2 {background: aqua;}
Mais cette méthode est inefficace : imaginez créer une telle liste pour un élément contenant 10 ou 15 styles ! Au lieu de cela, vous pouvez regrouper vos déclarations ensemble :
- h2 {font: 18px Helvetica; color: aliceblue; background: aqua;}
Cela aura exactement le même effet que la feuille de style à trois lignes venant d'être présentée.
Notez que l'utilisation de points-virgules à la fin de chaque déclaration est cruciale lorsque vous les regroupez. Les navigateurs Web ignorent les espaces dans les feuilles de style, donc l'agent utilisateur doit s'appuyer sur une syntaxe correcte pour analyser la feuille de style. Vous pouvez formater les styles sans crainte comme suit :
- h2 {
- font: 18px Helvetica;
- color: aliceblue;
- background: aqua;
- }
Vous pouvez également minimiser votre CSS en supprimant tous les espaces inutiles :
- h2{font:18px Helvetica;color:aliceblue;background:aqua;}
Les trois derniers exemples sont traités de la même manière par le serveur, mais le deuxième est généralement considéré comme le plus lisible par l'homme et constitue la méthode recommandée pour écrire votre CSS pendant le développement. Vous pouvez choisir de minimiser votre CSS pour des raisons de performances réseau, mais cela est généralement géré automatiquement par un outil de construction, un script côté serveur, un réseau de mise en cache ou un autre service. Il est donc généralement préférable d'écrire votre CSS de manière lisible par l'homme.
Si le point-virgule est omis dans la deuxième instruction, l'agent utilisateur interprétera la feuille de style comme suit :
- h1 {
- font: 18px Helvetica;
- color: aliceblue background: aqua;
- }
Étant donné que background: n'est pas une valeur valide pour la couleur, un agent utilisateur ignorera entièrement la déclaration de couleur (y compris la partie background: aqua). Vous pourriez penser que le navigateur afficherait au moins les <h2> sous forme de texte bleu alice sans arrière-plan aqua, mais ce n'est pas le cas. Au lieu de cela, ils seront de la couleur héritée avec un arrière-plan transparent. La déclaration font: 18px Helvetica prendra toujours effet car elle a été correctement terminée par un point-virgule.
Astuce : Bien que suivre la dernière déclaration d'une règle par un point-virgule ne soit pas techniquement nécessaire en CSS, le faire est généralement une bonne pratique. Tout d'abord, cela vous permettra de garder l'habitude de terminer vos déclarations par des points-virgules, dont l'absence est l'une des causes les plus courantes d'erreurs de rendu. Ensuite, si vous décidez d'ajouter une autre déclaration à une règle, vous n'aurez pas à vous soucier d'oublier d'insérer un point-virgule supplémentaire.
Comme pour le regroupement de sélecteurs, le regroupement de déclarations est un moyen pratique de garder vos feuilles de style courtes, expressives et faciles à maintenir.
Regrouper tout
Vous savez maintenant que vous pouvez regrouper des sélecteurs et des déclarations. En combinant les deux types de regroupement dans des règles uniques, vous pouvez définir des styles très complexes en utilisant seulement quelques instructions. Maintenant, que faire si vous souhaitez attribuer des styles complexes à tous les titres d'un document et que vous souhaitez que les mêmes styles soient appliqués à tous ? Voici comment procéder :
- h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em; border: 1px solid black; font-family: Arial, sans-serif;}
Ici, nous avons regroupé les sélecteurs, de sorte que les styles à l'intérieur des accolades seront appliqués à tous les titres répertoriés; le regroupement des déclarations signifie que tous les styles répertoriés seront appliqués aux sélecteurs sur le côté gauche de la règle.
Cette approche est préférable à l'alternative longue et fastidieuse, commençant par quelque chose comme ceci :
- h1 {color: black;}
- h2 {color: black;}
- h3 {color: black;}
- h4 {color: black;}
- h5 {color: black;}
- h6 {color: black;}
- h1 {background: white;}
- h2 {background: white;}
- h3 {background: white;}
... ?et continuer sur plusieurs lignes. Vous pouvez écrire vos styles de la manière la plus longue, mais nous ne le recommandons pas : les éditer serait aussi fastidieux que d'utiliser des attributs de style partout !
Le regroupement permet des choix intéressants. Par exemple, tous les groupes de règles dans l'exemple suivant sont équivalents : chacun montre simplement une manière différente de regrouper les sélecteurs et les déclarations :
- /* groupe 1 */
- h1 {color: lightgray; background: white;}
- h2 {color: lightgray; background: black;}
- h3 {color: white; background: black;}
- h4 {color: lightgray; background: white;}
- b {color: black; background: white;}
-
-
- /* groupe 2 */
- h1, h2, h4 {color: lightgray;}
- h2, h3 {background: black;}
- h1, h4, b {background: white;}
- h3 {color: white;}
- b {color: black;}
-
- /* groupe 3 */
- h1, h4 {color: lightgray; background: white;}
- h2 {color: lightgray;}
- h3 {color: white;}
- h2, h3 {background: black;}
- b {color: black; background: white;}
Sélecteurs de classe et d'ID
Jusqu'ici, nous avons regroupé les sélecteurs et les déclarations de diverses manières, mais les sélecteurs que nous avons utilisés sont très simples et ne font référence qu'aux éléments du document. Les sélecteurs de type sont efficaces jusqu'à un certain point, mais il faut souvent quelque chose d'un peu plus ciblé.
En plus des sélecteurs de type, CSS dispose de sélecteurs de classe et de sélecteurs d'ID, vous permettant d'attribuer des styles en fonction des attributs HTML, mais indépendamment du type d'élément. Ces sélecteurs peuvent être utilisés seuls ou en conjonction avec des sélecteurs de type. Cependant, ils ne fonctionnent que si vous avez balisé votre document de manière appropriée, donc leur utilisation nécessite généralement un peu de réflexion et de planification.
Par exemple, supposons qu'un document contienne plusieurs avertissements. Vous souhaitez que chaque avertissement apparaisse en gras pour qu'il se démarque. Cependant, vous ne savez pas quels types d'éléments contiennent ce contenu d'avertissement. Certains avertissements peuvent être des paragraphes entiers, tandis que d'autres peuvent être un élément unique dans une longue liste ou quelques mots dans une section de texte. Vous ne pouvez donc pas définir une règle à l'aide de sélecteurs de type, quels qu'ils soient. Supposons que vous ayez essayé cette méthode :
- p {
- font-weight: bold;
- color: blue;
- }
Tous les paragraphes seront en bleu et en gras, pas seulement ceux contenant des avertissements. Vous devez trouver un moyen de sélectionner uniquement le texte contenant des avertissements, ou, plus précisément, un moyen de sélectionner uniquement les éléments qui sont des avertissements. Comment faire ? Vous appliquez des styles aux parties du document ayant été marquées d'une certaine manière, indépendamment des éléments concernés, en utilisant des sélecteurs de classe.
Sélecteurs de classe
La façon la plus courante d'appliquer des styles sans se soucier des éléments impliqués est d'utiliser des sélecteurs de classe. Avant de pouvoir les utiliser, vous devez toutefois modifier le balisage de votre document afin que les sélecteurs de classe fonctionnent. Entrez l'attribut class :
Pour associer les styles d'un sélecteur de classe à un élément, vous devez attribuer à un attribut de classe la valeur appropriée. Dans le bloc de code précédent, une valeur de classe d'avertissement est attribuée à deux éléments : le premier paragraphe et l'élément <span> dans le deuxième paragraphe.
Pour appliquer des styles à ces éléments classés, vous pouvez utiliser une notation compacte dans laquelle le nom de la classe est précédé d'un point (.) :
- *.warning {font-weight: bold;}
La déclaration font-weight: bold sera appliquée à chaque élément portant un attribut de classe avec une valeur d'avertissement.
Le sélecteur de classe fonctionne en référençant directement une valeur se trouvant dans l'attribut de classe d'un élément. Cette référence est toujours précédée d'un point (.), qui le marque comme un sélecteur de classe. Le point permet de séparer le sélecteur de classe de tout ce avec quoi il pourrait être combiné, comme un sélecteur de type. Par exemple, vous pouvez souhaiter que le texte d'avertissement soit en gras uniquement lorsqu'un paragraphe entier est un avertissement :
- p.warning {font-weight: bold;}
Le sélecteur correspond désormais à tous les éléments <p> ayant un attribut de classe contenant le mot avertissement, mais aucun autre élément de quelque sorte que ce soit, classé ou autre. Étant donné que l'élément <span> n'est pas un paragraphe, le sélecteur de la règle ne lui correspond pas et il ne s'affichera pas en gras.
Si vous souhaitez attribuer des styles différents à l'élément <span>, vous pouvez utiliser le sélecteur span.warning :
- p.warning {font-weight: bold;}
- span.warning {font-style: italic;}
Dans ce cas, le paragraphe d'avertissement est en gras, tandis que l'avertissement <span> est en italique. Chaque règle s'applique uniquement à un type spécifique de combinaison élément/classe, de sorte qu'elle ne s'étend pas à d'autres éléments.
Une autre option consiste à utiliser une combinaison d'un sélecteur de classe général et d'un sélecteur de classe spécifique à l'élément pour rendre les styles encore plus utiles, comme dans la balise suivant :
- .warning {font-style: italic;}
- span.warning {font-weight: bold;}
Dans cette situation, tout texte d'avertissement sera en italique, mais seul le texte dans un élément <span> avec une classe d'avertissement sera à la fois en gras et en italique.
Astuce : Notez le format du sélecteur de classe général utilisé dans l'exemple précédent : il s'agit d'un nom de classe précédé d'un point, et sans nom d'élément ni sélecteur universel. Si vous souhaitez sélectionner tous les éléments qui partagent un nom de classe, vous pouvez omettre le sélecteur universel d'un sélecteur de classe sans aucun effet néfaste. Ainsi, *.warning et .warning auront exactement le même effet.
Autre chose à propos des noms de classe : ils ne doivent jamais commencer par un chiffre. Les navigateurs vous permettront de vous en sortir, mais les validateurs CSS se plaindront, et c'est une mauvaise habitude à prendre. Ainsi, vous devriez écrire .c777 dans votre CSS et class="c777" dans votre HTML, plutôt que .777 et class="777". Si vous devez faire référence à des classes commençant par des chiffres, placez une barre oblique inverse entre le point et le premier chiffre dans votre sélecteur de classe, comme ceci : .\777.
Classes multiples
Dans la section précédente, nous avons traité des valeurs de classe contenant un seul mot. En HTML, il est possible d'avoir une liste de mots séparés par des espaces dans une seule valeur de classe. Par exemple, si vous souhaitez marquer un élément particulier comme étant à la fois urgent et un avertissement, vous pouvez écrire ceci :
L'ordre des mots n'a pas d'importance; warning highlevel fonctionnerait également et donnerait exactement les mêmes résultats, quelle que soit la manière dont votre CSS est écrit. Contrairement aux balises HTML et aux sélecteurs de type, les sélecteurs de classe sont sensibles à la casse.
Supposons maintenant que vous souhaitiez que tous les éléments avec une classe warning soient en gras, ceux avec une classe highlevel en italique et les éléments avec les deux valeurs sur fond gris clair. Cela s'écrirait comme suit :
- .warning {font-weight: bold;}
- .highlevel {font-style: italic;}
- .warning.highlevel {background: lightgray;}
En enchaînant deux sélecteurs de classe, vous pouvez sélectionner uniquement les éléments ayant les deux noms de classe, dans n'importe quel ordre. Comme vous pouvez le voir, le code source HTML contient class="highlevel warning", mais le sélecteur CSS est écrit .warning.highlevel. Quoi qu'il en soit, la règle fera toujours en sorte que le paragraphe «Lors de la manipulation de texte, il faut veiller à éviter de couper des bouts de texte critique.» ait un arrière-plan gris clair. Cela se produit parce que l'ordre dans lequel les mots sont écrits dans le document source, ou dans le CSS, n'a pas d'importance. Cela ne veut pas dire que l'ordre des classes est toujours sans importance.
Si un sélecteur de classe multiple contient un nom ne figurant pas dans la liste séparée par des espaces, la correspondance échouera. Considérez la règle suivante :
- p.warning.help {background: blue;}
Comme vous pouvez vous y attendre, le sélecteur ne correspondra qu'aux éléments <p> dont la classe contient les mots warning et help séparés par des espaces. Par conséquent, il ne correspondra pas à un élément <p> dont l'attribut class contient uniquement les mots warning et highlevel. Il correspondra cependant aux éléments suivants :
Sélecteurs d'ID
Les sélecteurs d'ID sont similaires aux sélecteurs de classe à certains égards, mais il existe quelques différences cruciales. Tout d'abord, les sélecteurs d'ID sont précédés d'un signe dièse (#) (anciennement appelé octothorpe et également connu sous le nom de signe dièse (aux États-Unis), signe numérique ou morpion) au lieu d'un point. Ainsi, vous pourriez voir une règle comme celle-ci :
- *#premier-para {font-weight: bold;}
Cette règle produit du texte en gras dans tout élément dont l'attribut id a une valeur de premier-para.
La deuxième différence est qu'au lieu de référencer les valeurs de l'attribut class, les sélecteurs d'ID font référence, de manière assez judicieuse, aux valeurs trouvées dans les attributs id. Voici un exemple de sélecteur d'ID en action :
- *#main-para {font-weight: bold;}
-
- <p id="main-para">Ce paragraphe sera en gras.</p>
- <p>Ce paragraphe ne sera PAS en gras.</p>
Notez que la valeur main-para aurait pu être attribuée à n'importe quel élément du document. Dans ce cas particulier, elle est appliquée au premier paragraphe, mais nous aurions pu l'appliquer tout aussi facilement au deuxième ou au troisième paragraphe. Ou à une liste non ordonnée. Ou à n'importe quoi.
La troisième différence est qu'un document ne doit avoir qu'une seule instance d'une valeur d'ID donnée. Si vous souhaitez appliquer le même ID à plusieurs éléments d'un document, faites-en plutôt une classe.
Comme pour les sélecteurs de classe, il est possible (et tout à fait la norme) d'omettre le sélecteur universel d'un sélecteur d'ID. Dans l'exemple précédent, nous aurions également pu écrire ceci avec exactement le même effet :
- #main-para {font-weight: bold;}
Cela est utile lorsque vous savez qu'une certaine valeur d'ID apparaîtra dans un document, mais que vous ne connaissez pas le type d'élément sur lequel elle apparaîtra. Par exemple, vous savez peut-être que dans un document donné, il y aura un élément avec une valeur d'ID lePlusImportant. Vous ne savez pas si cet élément le plus important sera un paragraphe, une courte phrase, un élément de liste ou un titre de section. Vous savez seulement qu'il existera dans chaque document, apparaîtra dans un élément arbitraire et n'apparaîtra pas plus d'une fois. Dans ce cas, vous écririez une règle comme celle-ci :
- #lePlusImportant {color: blue; background: orange;}
Cette règle correspondrait à l'un des éléments suivants (qui, comme indiqué précédemment, ne devraient pas apparaître ensemble dans le même document car ils ont tous la même valeur d'ID) :
Alors que les normes HTML stipulent que chaque identifiant doit être unique dans un document, CSS ne s'en soucie pas. Si nous avions inclus par erreur le code HTML montré tout à l'heure, les trois seraient probablement rouges avec un arrière-plan jaune car tous les trois correspondent au sélecteur #lePlusImportant.
Remarque : comme pour les noms de classe, les identifiants ne doivent jamais commencer par des chiffres. Si vous devez faire référence à un identifiant commençant par un chiffre et que vous ne pouvez pas modifier la valeur de l'identifiant dans la balise, utilisez une barre oblique inverse avant le premier chiffre, comme dans #\307.
Choisir entre classe et ID
Vous pouvez attribuer des classes à n'importe quel nombre d'éléments, comme démontré précédemment; l'avertissement relatif au nom de classe a été appliqué à la fois à un élément <p> et à un élément <span>, et il aurait pu être appliqué à de nombreux autres éléments. Les valeurs d'ID, en revanche, ne doivent être utilisées qu'une seule fois dans un document HTML. Par conséquent, si vous avez un élément avec une valeur d'ID de main-para, aucun autre élément de ce document ne doit avoir une valeur d'ID de main-para.
C'est en tout cas conforme à la spécification HTML. Comme indiqué précédemment, CSS ne se soucie pas de savoir si votre HTML est valide ou non : il doit trouver autant d'éléments qu'un sélecteur peut faire correspondre. Cela signifie que si vous parsemez un document HTML de plusieurs éléments, ayant tous la même valeur pour leurs attributs ID, vous devriez obtenir les mêmes styles appliqués à chacun.
Remarque : avoir plusieurs éléments de la même valeur d'ID dans un document rend le script DOM plus difficile, car des fonctions comme getElementById() dépendent de l'existence d'un seul élément avec une valeur d'ID donnée.
Contrairement aux sélecteurs de classe, les sélecteurs d'ID ne peuvent pas être combinés avec d'autres ID, car les attributs d'ID ne permettent pas une liste de mots séparés par des espaces. Un sélecteur d'ID peut cependant être combiné avec lui-même : #warning#warning correspondra à l'élément avec une valeur d'ID d'avertissement. Cela ne devrait être fait que rarement, voire jamais, mais c'est possible.
Une autre différence entre les noms de classe et d'ID est que les ID ont plus de poids lorsque vous essayez de déterminer les styles à appliquer à un élément donné.
Notez également que HTML définit les valeurs de classe et d'ID comme étant sensibles à la casse, donc la mise en majuscules de vos valeurs de classe et d'ID doit correspondre à ce qui se trouve dans vos documents. Ainsi, dans l'association suivante de CSS et HTML, le texte de l'élément ne sera pas en gras :
- p.dangerInfo {font-weight: bold;}
-
- <p class="dangerinfo">Ne regarde pas en bas.</p>
En raison du changement de casse pour la lettre i, le sélecteur ne correspondra pas à l'élément affiché.
Sur un plan purement syntaxique, il n'est pas garanti que la notation de classe de points (par exemple, .warning) fonctionne pour les documents XML. La notation de classe de points fonctionne en HTML, Scalar Vector Graphics (SVG) et Mathematical Markup Language (MathML), et elle pourrait bien être autorisée dans les langages futurs, mais il appartient à chaque langage de décider de cela. La notation d'ID de hachage (par exemple, #principal) devrait fonctionner dans tout langage de document possédant un attribut dont la valeur est censée être unique dans un document.
Sélecteurs d'attributs
Avec les sélecteurs de classe et d'ID, vous sélectionnez en réalité les valeurs des attributs des éléments. La syntaxe utilisée dans les deux sections précédentes est propre aux documents HTML, SVG et MathML au moment de la rédaction de cet article. Dans d'autres langages de balisage, ces sélecteurs de classe et d'ID peuvent ne pas être disponibles (tout comme ces attributs peuvent ne pas être présents).
Pour remédier à cette situation, CSS2 a introduit les sélecteurs d'attributs, pouvant être utilisés pour sélectionner des éléments en fonction de leurs attributs et des valeurs de ces attributs. Il existe quatre types généraux de sélecteurs d'attributs : les sélecteurs d'attributs simples, les sélecteurs de valeur d'attribut exacte, les sélecteurs de valeur d'attribut à correspondance partielle et les sélecteurs d'attributs à valeur initiale.
Sélecteurs d'attributs simples
Si vous souhaitez sélectionner des éléments ayant un certain attribut, quelle que soit la valeur de cet attribut, vous pouvez utiliser un sélecteur d'attribut simple. Par exemple, pour sélectionner tous les éléments <h1> ayant un attribut de classe avec n'importe quelle valeur et rendre leur texte argenté, écrivez ceci :
- h1[class] {color: lightgray;}
Donc, étant donné les balises suivant :
- <h1 class="bonjour">Bonjour</h1>
- <h1>Sérénité</h1>
- <h1 class="fantaisie">Trompeur</h1>
vous obtenez le résultat suivant :
Bonjour
Sérénité
Trompeur
Cette stratégie est très utile dans les documents XML, car les langages de programmation XML ont tendance à avoir des noms d'éléments et d'attributs spécifiques à leur objectif. Prenons un langage XML utilisé pour décrire les semaines (nous l'appellerons WeekML). Si vous souhaitez sélectionner tous les éléments <pml-week> avec un attribut businessday et les mettre en gras, attirant ainsi l'attention sur toute les journées ouvrables, vous devez écrire ceci :
- pml-week[businessday] {font-weight: bold;}
Cela entraînerait la mise en gras du texte des deuxième et troisième éléments du fragment de balise suivant, mais pas du premier :
- <pml-week>Dimanche</pml-week>
- <pml-week businessday="1">Lundi</pml-week>
- <pml-week businessday="2">Mardi</pml-week>
Dans les documents HTML, vous pouvez utiliser cette fonctionnalité de manière créative. Par exemple, vous pouvez appliquer un style à toutes les images ayant un attribut alt, mettant ainsi en évidence les images correctement formées :
- img[alt] {outline: 3px solid green;}
Cet exemple particulier est généralement plus utile à des fins de diagnostic (déterminer si les images sont effectivement correctement balisées) qu'à des fins de conception.
Si vous souhaitez mettre en gras tout élément incluant des informations de titre, que la plupart des navigateurs affichent sous forme d'info-bulle lorsqu'un curseur survole l'élément, vous pouvez écrire ceci :
- *[title] {font-weight: bold;}
De la même manière, vous pouvez appliquer un style uniquement aux ancres (éléments <a>) ayant un attribut href, en appliquant ainsi les styles à tous les liens hypertexte mais pas aux ancres d'espace réservé.
Il est également possible de sélectionner des éléments en fonction de la présence de plusieurs attributs. Pour cela, vous devez enchaîner les sélecteurs d'attributs. Par exemple, pour mettre en gras le texte de tout lien hypertexte HTML ayant à la fois un attribut href et un attribut title, vous devez écrire ce qui suit :
- a[href][title] {font-weight: bold;}
Cela mettrait en gras le premier lien dans le balisage suivant, mais pas le deuxième ni le troisième :
Sélection basée sur la valeur exacte de l'attribut
Vous pouvez affiner davantage le processus de sélection pour n'englober que les éléments dont les attributs ont une certaine valeur. Par exemple, supposons que vous souhaitiez mettre en gras tout lien hypertexte pointant vers un certain document sur le serveur Web. Cela ressemblerait à ceci :
- a[href="https://www.gladir.com/CODER/noteslegal.htm"] {font-weight: bold;}
Cela mettra en gras le texte de tout élément a possédant un attribut href avec exactement la valeur https://www.gladir.com/CODER/noteslegal.htm. Toute modification, même la suppression de la partie www ou le passage à un protocole sécurisé avec https, empêchera la correspondance.
Toute combinaison d'attribut et de valeur peut être spécifiée pour tout élément. Cependant, si cette combinaison exacte n'apparaît pas dans le document, le sélecteur ne correspondra à rien. Là encore, les langages XML peuvent bénéficier de cette approche de style. Revenons à notre exemple PlanetML. Supposons que vous souhaitiez sélectionner uniquement les éléments week ayant une valeur de 1 pour l'attribut businessday :
- week[businessday="1"] {font-weight: bold;}
Cela mettrait en gras le texte du deuxième élément dans le fragment de balise suivant, mais pas le premier ni le troisième :
- <week>Dimanche</week>
- <week businessday="1">Lundi</week>
- <week businessday="2">Mardi</week>
Comme pour la sélection d'attributs, vous pouvez enchaîner plusieurs sélecteurs de valeurs d'attributs pour sélectionner un seul document. Par exemple, pour doubler la taille du texte de tout lien hypertexte HTML possédant à la fois un href avec une valeur de https://www.gladir.com/ et un attribut title avec une valeur de Gladir.com, vous devez écrire ceci :
- a[href="https://www.gladir.com/"][title="Gladir.com"] {font-size: 200%;}
Cela doublerait la taille du texte du premier lien dans le balisage suivant, mais pas du deuxième ou du troisième :
Là encore, ce format nécessite une correspondance exacte de la valeur de l'attribut. La correspondance devient un problème lorsqu'un sélecteur d'attribut rencontre des valeurs pouvant, à leur tour, contenir une liste de valeurs séparées par des espaces (par exemple, la classe d'attribut HTML). Par exemple, considérez le fragment de balisage suivant :
- <week type="Jour de mercure">Mercredi</week>
La seule façon de faire correspondre cet élément en fonction de sa valeur d'attribut exacte est d'écrire ceci :
- week[type="Jour de mercure"] {font-weight: bold;}
Si vous écriviez week[type="jour"], la règle ne correspondrait pas au balisage d'exemple et échouerait donc. Cela est vrai même pour l'attribut class en HTML. Considérez ce qui suit :
Pour sélectionner cet élément en fonction de sa valeur d'attribut exacte, vous devrez écrire ceci :
- p[class="highlevel warning"] {font-weight: bold;}
Cela n'est pas équivalent à la notation dot-class abordée précédemment. Au lieu de cela, elle sélectionne tout élément p dont l'attribut class a exactement la valeur highlevel warning, avec les mots dans cet ordre et un seul espace entre eux. Il s'agit en fait d'une correspondance de chaîne de caractères exacte, alors que lorsque vous utilisez un sélecteur de classe, l'ordre des classes n'a pas d'importance.
Sachez également que les sélecteurs d'ID et les sélecteurs d'attribut ciblant l'attribut id ne sont pas exactement les mêmes. En d'autres termes, il existe une différence subtile mais cruciale entre h1#page-title et h1[id="page-title"].
Sélection basée sur des valeurs d'attribut partielles
Il est probable que vous souhaitiez parfois sélectionner des éléments en fonction de parties de leurs valeurs d'attribut, plutôt que de la valeur complète. Pour de telles situations, CSS propose diverses options pour faire correspondre les sous-chaînes de caractères dans la valeur d'un attribut. Celles-ci sont résumées dans le tableau suivant :
| Type | Description |
|---|---|
| [attr~="texte"] | Sélectionne tout élément avec un attribut attr dont la valeur contient le mot texte dans une liste de mots séparés par des espaces. |
| [attr*="texte"] | Sélectionne tout élément avec un attribut attr dont la valeur contient la sous-chaîne de caractères texte. |
| [attr^="texte"] | Sélectionne tout élément avec un attribut attr dont la valeur commence par texte |
| [attr$="texte"] | Sélectionne tout élément avec un attribut attr dont la valeur se termine par texte |
| [attr|="texte"] | Sélectionne tout élément avec un attribut attr dont la valeur commence par texte suivi d'un tiret (U+002D) ou dont la valeur est exactement égale à texte. |