Comment cibler une partie d’une page Web à l’aide de sélecteurs CSS »wiki utile
Les feuilles de style en cascade (CSS) vous permettent de transformer l'apparence de vos pages Web. Des polices et couleurs à l'espacement et à la mise en page générale, toutes sortes d'outils de conception sont à portée de main. Bien que le CSS soit un langage compliqué dans son intégralité, il n'y a que deux concepts de base que vous devez comprendre pour commencer.
Tout commence par identifier exactement la partie de la page que vous souhaitez styliser.
CSS = sélecteurs + déclarations
Un fichier CSS contient une série de règles décrivant comment un fichier HTML doit être formaté. Chaque règle se compose de deux parties: quoi styliser et comment le styliser. La première partie est contrôlée à l'aide d'une série de termes appelés «sélecteurs».
Les exemples de cet article incluent des déclarations de style, mais elles ne sont pas le focus: les sélecteurs eux-mêmes le sont.
Historiquement, il y avait trois niveaux de sélecteur CSS (ou versions) avec différents degrés de prise en charge du navigateur. En 2020, selon Can I Use , ils sont tous disponibles pour plus de 99% des utilisateurs dans le monde.
Sélecteurs de niveau 1
Le niveau 1 a introduit les quatre types fondamentaux de sélecteurs qui couvrent un grand nombre de cas, même aujourd'hui.
| Modèle | Allumettes |
|---|---|
E | tous les éléments E |
.c | tous les éléments avec class = "c" |
#myid | l'élément avec id = "myid" |
EF | un élément F à l'intérieur d'un élément E |
| Pseudo-classes | |
E:link | un lien hypertexte vers une page qui n'a pas été précédemment visitée |
E:visited | un lien hypertexte vers une page déjà visitée |
E:active | un lien hypertexte actuellement sélectionné |
| Pseudo-éléments | |
E::first-line | la première ligne formatée d'un élément E |
E::first-letter | la première lettre formatée d'un élément E |
Sélecteur de type
Le sélecteur le plus simple est le «sélecteur de type». Il cible toutes les instances d'un élément, comme un paragraphe ou du texte en gras:
p { margin-bottom: 0; }
b { font-family: sans-serif; }Sélecteur de classe
L'attribut class permet d'ajouter une sémantique supplémentaire à un élément HTML, tel qu'un type spécifique de paragraphe. Ces éléments peuvent être sélectionnés dans CSS comme suit:
.intro { font-weight: bold; }Ce sélecteur correspondrait:
<p class="intro">…</p>Mais notez qu'il correspondrait également:
<ul class="intro">…</ul>Si vous souhaitez qu'il s'applique uniquement aux paragraphes d'introduction, vous pouvez combiner le sélecteur de type et le sélecteur de classe:
p.intro { font-weight: bold; }Sélecteur d'ID
L'attribut HTML id doit être unique dans un document, par exemple si vous avez:
<div id="contents">…</div>Cela devrait être le seul élément avec un identifiant «contenu». Un sélecteur d'ID vous permet de cibler cet élément spécifique dans un document:
#contents { color: #333; }Sélecteur de descendant
Strictement, un «combinateur», car ce sélecteur est tout au sujet de l'espace entre deux autres. Le HTML est hiérarchique, comme expliqué dans notre présentation du DOM . Un sélecteur descendant permet d'identifier un élément par son contexte à l'intérieur d'un autre élément:
table b { font-weight: normal; }Pseudo classes et éléments
Les pseudo sélecteurs ciblent des classes ou des éléments qui n'existent pas explicitement mais qui sont quand même rendus disponibles. Considérez-les comme des bonus de contenu spéciaux:
p::first-line { text-transform: uppercase; }Listes de sélection
Utilisez une virgule pour combiner les sélecteurs dans une liste si vous souhaitez appliquer le même ensemble de règles à chacun. Au lieu de:
th { padding: 1em; }
td { padding: 1em; }Tu peux écrire:
th, td { padding: 1em; }Spécificité
Une feuille de style est une série de règles qui utilisent un sélecteur pour faire correspondre un élément, mais que se passe-t-il lorsque plusieurs règles correspondent à un élément donné? Le comportement qui en résulte est régi par la «spécificité» qui définit quelle règle est utilisée dans un cas tel que:
p.intro { color: black; }
p { color: gray; }Dans de tels cas, la règle prioritaire est définie par sa spécificité, comme suit:
- Les sélecteurs d'identifiant (`# contents`) sont les plus spécifiques.
- Les sélecteurs de classe («.author») sont moins spécifiques.
- Les sélecteurs de type («p») sont les moins spécifiques.
Lors du calcul de la spécificité, chaque niveau n'est pris en compte que si deux sélecteurs ont le même score au niveau supérieur, donc "#contents" est plus spécifique que "article.news p.author.special" car l'ancien "gagne" sur les sélecteurs d'ID.
Sélecteurs de niveau 2
La prochaine révision des sélecteurs CSS a introduit les sélecteurs d'attributs, développé les pseudo-classes et pseudo-éléments, et ajouté deux nouveaux combinateurs.
| Modèle | Allumettes |
|---|---|
* | tout élément |
E > F | un élément F enfant d'un élément E |
E + F | un élément F immédiatement précédé d'un élément E |
| Sélecteurs d'attributs | |
E[foo] | un élément E avec un attribut "foo" |
E[foo="bar"] | un élément E dont l'attribut "foo" est exactement "bar" |
E[foo~="bar"] | un élément E dont l'attribut "foo" est une liste de valeurs séparées par des espaces, dont l'une est "bar" |
E[foo|="en"] | un élément E dont l'attribut "foo" a une liste de valeurs séparées par des tirets commençant par "en" |
| Pseudo-classes | |
E:first-child | un élément E, premier enfant de son parent |
E:lang(fr) | un élément de type E dans la langue "fr" |
| Pseudo-éléments | |
E::before | contenu généré avant le contenu d'un élément E |
E::after | contenu généré après le contenu d'un élément E |
Sélecteur universel
Le «*» correspond à n'importe quel élément. Ce n'est souvent pas très utile, mais si vous souhaitez réinitialiser les marges par défaut, par exemple, vous pouvez le faire:
* { margin: 0; }Sélecteurs d'attributs
Les sélecteurs d'attributs permettent aux styles d'être ciblés très spécifiquement, filtrés par l'attribut d'un élément:
a[title] { text-decoration: underline dotted; }Combinateur d'enfant: un élément immédiatement à l'intérieur d'un autre
Similaire au combinateur descendant, mais celui-ci ne correspond qu'aux enfants immédiats, pas aux descendants plus bas dans l'arbre. Par exemple, «ul> li» correspondra uniquement au texte «Section 1» ici, et non à «Section 1.1»:
<ul>
<li>
Section 1
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>
</ul>
Combinateur de frères et sœurs adjacents: le prochain frère
h1 + p { font-weight: bold; }Souvent utile pour contrôler les marges, ou un paragraphe d'introduction sans classe spécifique, ce sélecteur ne correspond à un élément que s'il en suit immédiatement un autre. Dans l'exemple, seul le premier paragraphe sera mis en correspondance, pas le second:
<h1>Contents</h1>
some extra text
<p>Introductory paragraph</p>
<p>Following paragraph</p>
Notez que ce sélecteur ne prend en compte que les éléments (et non le texte) pour décider quel est le prochain frère.
Héritage
Certaines propriétés CSS héritent de leur valeur d'un élément ancêtre. En pratique, cela signifie, par exemple, que la définition de la police de l'élément «corps» signifie que chaque paragraphe, tableau, etc. utilise également cette même police.
Bien sûr, c'est exactement ce à quoi vous vous attendez, mais considérez une propriété qui n'hérite pas: «margin», par exemple. Vous ne voudriez pas que chaque paragraphe ou chaque morceau de texte en gras ait la même marge que l'ensemble du document.
Une bonne règle de base est de cibler les éléments aussi généralement que cela a du sens – ne ciblez pas chaque élément individuel quand un simple sélecteur «corps» fera l'affaire.
Sélecteurs de niveau 3
De nombreuses pseudo-classes ont été ajoutées à ce niveau, aux côtés de certains sélecteurs d'attributs et d'un nouveau combinateur.
| Modèle | Allumettes |
|---|---|
E ~ F | un élément F précédé d'un élément E |
| Sélecteurs d'attributs | |
E[foo^="bar"] | un élément E dont l'attribut "foo" commence par la chaîne "bar" |
E[foo$="bar"] | un élément E dont l'attribut "foo" se termine par la chaîne "bar" |
E[foo*="bar"] | un élément E dont l'attribut "foo" contient la sous-chaîne "bar" |
| Pseudo-classes | |
E:root | un élément E, racine du document |
E:nth-child(n) | un élément E, le n-ième enfant de son parent |
E:nth-last-child(n) | un élément E, le n-ième enfant de son parent, à partir du dernier |
E:nth-of-type(n) | un élément E, le n-ième frère de son type |
E:nth-last-of-type(n) | un élément E, le n-ième frère de son type, à compter du dernier |
E:last-child | un élément E, dernier enfant de son parent |
E:first-of-type | un élément E, premier frère de son type |
E:last-of-type | un élément E, dernier frère de son type |
E:only-child | un élément E, seul enfant de son parent |
E:only-of-type | un élément E, seul frère de son type |
E:empty | un élément E qui n'a pas d'enfants (y compris les nœuds de texte) |
E:target | un élément E étant la cible de l'URI référent |
E:enabled | un élément d'interface utilisateur E qui est activé |
E:disabled | un élément d'interface utilisateur E qui est désactivé |
E:checked | un élément d'interface utilisateur E qui est vérifié |
E:not(s) | un élément E qui ne correspond pas aux sélecteurs simples |
Sélecteurs d'attributs
Vous pouvez sélectionner des éléments avec un attribut commençant par une valeur donnée: a[href^="https:"] , se terminant par une valeur donnée: img[src$=".gif"] , ou contenant une valeur: a[*="value"] .
Pseudo classes
Les pseudo-classes supplémentaires incluent «: last-child», «: empty» (pour correspondre à un élément sans contenu) et «: checked» qui correspond à un élément comme une entrée de case à cocher, mais uniquement lorsqu'il est coché.
Combinateur général des frères et sœurs: un frère ou une sœur suivant
Semblable au combinateur de frères et sœurs adjacents du niveau 2, cela correspond à n'importe quel frère qui vient après un autre, pas seulement le suivant:
h1 ~ p { font-size: 110%; }Sélecteurs CSS et comment les utiliser
Vous savez maintenant à peu près tout ce qu'il faut savoir sur la façon de sélectionner une partie d'une page Web en utilisant CSS. Vous êtes maintenant prêt à styliser vos pages avec la grande variété de propriétés CSS qui couvrent tout, des couleurs à la mise en page.
Crédit d'image: Pankaj Patel / Unsplash