Sélecteurs

Podcast CSS – 002: Sélecteurs

Comment faire si vous souhaitez afficher du texte en plus grand et en rouge uniquement s'il s'agit du premier paragraphe d'un article ?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Utilisez un sélecteur CSS pour trouver cet élément spécifique et appliquer une règle CSS, comme celle-ci.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

Afin de vous aider à résoudre de telles situations, le CSS vous propose de nombreuses options pour sélectionner des éléments et leur appliquer des règles, allant de très simples à très complexes.

Composants d'une règle CSS

Pour comprendre le fonctionnement des sélecteurs et leur rôle dans CSS, il est important de connaître les parties d'une règle CSS. Une règle CSS est un bloc de code contenant un ou plusieurs sélecteurs et une ou plusieurs déclarations.

Dans cette règle CSS, le sélecteur est .my-css-rule. Il recherche tous les éléments de classe my-css-rule sur la page. Il y a trois déclarations entre les accolades. Une déclaration est une paire propriété/valeur qui applique des styles aux éléments mis en correspondance par les sélecteurs. Une règle CSS peut comporter autant de déclarations et de sélecteurs que vous le souhaitez.

Sélecteurs simples

Le groupe de sélecteurs le plus simple cible les éléments HTML, ainsi que les classes, les ID et d'autres attributs qui peuvent être ajoutés à une balise HTML.

Sélecteur universel

Un sélecteur universel, également appelé caractère générique, correspond à n'importe quel élément.

* {
  color: hotpink;
}

Avec cette règle, chaque élément HTML de la page affichera un texte cliquable.

Sélecteur de type

Un sélecteur de type correspond directement à un élément HTML.

section {
  padding: 2em;
}

Avec cette règle, chaque élément <section> comporte 2em de padding sur tous les côtés.

Sélecteur de classe

Un élément HTML peut comporter un ou plusieurs éléments définis dans leur attribut class. Le sélecteur de classe correspond à tous les éléments auxquels cette classe est appliquée.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Tous les éléments auxquels la classe est appliquée sont colorés en rouge:

.my-class {
  color: red;
}

Notez que . n'est présent que dans CSS, et non dans le code HTML. En effet, le caractère . indique à la langue CSS de faire correspondre les membres des attributs de classe. Il s'agit d'un schéma courant en CSS, où un caractère spécial ou un ensemble de caractères sont utilisés pour définir les types de sélecteurs.

Un élément HTML ayant une classe .my-class sera toujours mis en correspondance avec la règle CSS ci-dessus, même s'il possède plusieurs autres classes, comme celle-ci:

<div class="my-class another-class some-other-class"></div>

En effet, CSS recherche un attribut class qui contient la classe définie au lieu de correspondre exactement à cette classe.

Sélecteur d'ID

Le seul élément de la page ayant un attribut id doit être associé à cet ID. Vous sélectionnez les éléments avec un sélecteur d'ID comme suit:

#rad {
  border: 1px solid blue;
}

Ce CSS applique une bordure bleue à l'élément HTML dont l'id est rad, comme ceci:

<div id="rad"></div>

Comme pour le sélecteur de classe ., utilisez un caractère # pour indiquer à CSS de rechercher un élément correspondant à la id qui le suit.

Sélecteur d'attribut

Vous pouvez rechercher les éléments ayant un attribut HTML donné ou une valeur donnée pour un attribut HTML à l'aide du sélecteur d'attribut. Pour demander au CSS de rechercher les attributs, encapsulez le sélecteur entre crochets ([ ]).

[data-type='primary'] {
  color: red;
}

Ce CSS recherche tous les éléments comportant un attribut data-type avec une valeur primary, comme ceci:

<div data-type="primary"></div>

Au lieu de rechercher une valeur spécifique de data-type, vous pouvez également rechercher des éléments avec l'attribut présent, quelle que soit sa valeur.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Ces deux éléments <div> s'affichent en rouge.

Vous pouvez utiliser des sélecteurs d'attributs sensibles à la casse en ajoutant un opérateur s à votre sélecteur d'attributs.

[data-type='primary' s] {
  color: red;
}

Cela signifie que si un élément HTML avait la valeur data-type Primary au lieu de primary, il ne recevrait pas de texte en rouge. Vous pouvez faire le contraire (insensibilité à la casse) en utilisant un opérateur i.

En plus des opérateurs "case", vous avez accès à des opérateurs qui correspondent à des parties de chaînes dans les valeurs d'attribut.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

Sélecteurs de regroupement

Un sélecteur ne doit pas nécessairement correspondre à un seul élément. Vous pouvez regrouper plusieurs sélecteurs en les séparant par des virgules:

strong,
em,
.my-class,
[lang] {
  color: red;
}

Cet exemple étend le changement de couleur aux éléments <strong> et <em>. Il est également étendu à une classe nommée .my-class et à un élément doté d'un attribut lang.

Testez vos connaissances

Tester vos connaissances sur les sélecteurs simples

* {}

div {}

Pseudo-classes et pseudo-éléments

CSS fournit des types de sélecteurs utiles qui se concentrent sur un état de plate-forme spécifique, comme le survol d'un élément, des structures à l'intérieur ou des parties d'un élément.

Pseudo-classes

Les éléments HTML se retrouvent dans différents états, soit parce qu'ils interagissent, soit parce que l'un de leurs éléments enfants est dans un certain état.

Par exemple, un utilisateur peut pointer sur un élément HTML avec le pointeur de la souris ou un élément enfant. Dans ce cas, utilisez la pseudo-classe :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Pour en savoir plus, consultez le module de pseudo-classes.

Pseudo-élément

Les pseudo-éléments diffèrent des pseudo-classes, car au lieu de répondre à l'état de la plate-forme, ils agissent comme s'ils inséraient un nouvel élément avec CSS. Les pseudo-éléments sont également différents des pseudo-classes d'un point de vue syntaxique, car au lieu d'un seul deux-points (:), nous utilisons un double deux-points (::).

.my-element::before {
  content: 'Prefix - ';
}

Comme dans la démonstration ci-dessus, où vous avez préfixé le libellé d'un lien avec le type de fichier dont il s'agit, vous pouvez utiliser le pseudo-élément ::before pour insérer du contenu au début d'un élément ou le pseudo-élément ::after pour insérer du contenu à la fin d'un élément.

Les pseudo-éléments ne se limitent pas à l'insertion de contenu. Vous pouvez également les utiliser pour cibler des parties spécifiques d'un élément. Par exemple, supposons que vous ayez une liste. Utilisez ::marker pour appliquer un style à chaque puce (ou numéro) de la liste

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Vous pouvez également utiliser ::selection pour appliquer un style au contenu mis en surbrillance par un utilisateur.

::selection {
  background: black;
  color: white;
}

Pour en savoir plus, consultez le module consacré aux pseudo-éléments.

Testez vos connaissances

Tester vos connaissances sur les pseudo-sélecteurs

p:hover {
  background: white;
  color: black;
}

Sélecteurs complexes

Vous avez déjà vu un large éventail de sélecteurs, mais vous aurez parfois besoin d'un contrôle plus précis avec votre CSS. C'est là que les sélecteurs complexes interviennent.

Notez que même si les sélecteurs suivants nous offrent plus de puissance, nous ne pouvons en cascade que vers le bas, en sélectionnant des éléments enfants. Nous ne pouvons pas cibler le haut et sélectionner un élément parent. Nous aborderons la notion de cascade et son fonctionnement dans une leçon ultérieure.

Combinateurs

Un combinateur est ce qui se trouve entre deux sélecteurs. Par exemple, si le sélecteur était p > strong, le combinateur est le caractère >. Les sélecteurs qui utilisent ces combinaisons vous permettent de sélectionner des éléments en fonction de leur position dans le document.

Combinateur descendant

Pour comprendre les combinateurs de descendants, vous devez d'abord comprendre les éléments parents et enfants.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

L'élément parent est l'élément <p> qui contient du texte. Cet élément <p> contient un élément <strong>, qui met son contenu en gras. Comme il se trouve dans <p>, il s'agit d'un élément enfant.

Un combinateur descendant nous permet de cibler un élément enfant. Cette commande utilise un espace () pour indiquer au navigateur de rechercher les éléments enfants:

p strong {
  color: blue;
}

Cet extrait sélectionne tous les éléments <strong> qui sont uniquement des éléments enfants d'éléments <p>. Ils sont ainsi bleus de manière récursive.

Cet effet est mieux visualisé dans l'exemple ci-dessus, à l'aide du sélecteur de combinatoire .top div. Cette règle CSS ajoute une marge intérieure gauche à ces éléments <div>. Étant donné que le combinateur est récursif, la même marge intérieure est appliquée à tous les éléments <div> qui se trouvent dans .top.

Examinez le panneau HTML de cette démonstration pour voir comment l'élément .top comporte plusieurs éléments enfants <div> qui, eux-mêmes, ont des éléments enfants <div>.

Combinateur frère suivant

Vous pouvez rechercher un élément qui suit immédiatement un autre élément en utilisant un caractère + dans votre sélecteur.

Pour ajouter de l'espace entre des éléments empilés, utilisez le combinateur frère suivant pour ajouter de l'espace uniquement si un élément est un sœur suivant d'un élément enfant de .top.

Vous pouvez ajouter une marge à tous les éléments enfants de .top à l'aide du sélecteur suivant:

.top * {
  margin-top: 1em;
}

Le problème est que, comme vous sélectionnez chaque élément enfant de .top, cette règle peut créer un espace supplémentaire inutile. Le combinateur frère suivant, associé à un sélecteur universel, vous permet non seulement de contrôler les éléments qui obtiennent de l'espace, mais également de l'appliquer à n'importe quel élément. Vous bénéficiez ainsi d'une certaine flexibilité à long terme, quels que soient les éléments HTML affichés dans .top.

Combinateur frère suivant

Un combinateur ultérieur est très semblable à un sélecteur frère suivant. Cependant, au lieu d'un caractère +, utilisez un caractère ~. La différence est qu'un élément doit simplement suivre un autre élément ayant le même parent, plutôt que d'être l'élément suivant avec le même parent.

Ce combinateur ultérieur offre un peu moins de rigidité, ce qui est utile dans des contextes tels que l'exemple ci-dessus, où nous changeons la couleur d'un contacteur personnalisé lorsque la case à cocher associée présente l'état :checked.

Combinateur enfant

Un combinateur enfant (également appelé descendant direct) vous permet de mieux contrôler la récursion associée aux sélecteurs de combinatoire. En utilisant le caractère >, vous limitez le sélecteur de combinatoire afin qu'il s'applique uniquement aux enfants directs.

Prenons l'exemple de sélecteur de frères sœurs précédent. L'espace est ajouté à chaque sœur suivant, mais si l'un de ces éléments a également des éléments frères suivants en tant qu'enfants, cela peut entraîner un espacement supplémentaire indésirable.

Pour résoudre ce problème, modifiez le sélecteur de frères et sœurs suivant pour intégrer un combinateur enfant: > * + *. La règle s'appliquera désormais uniquement aux enfants directs de .top.

Sélecteurs composés

Vous pouvez combiner des sélecteurs pour améliorer la spécificité et la lisibilité. Par exemple, pour cibler les éléments <a> qui ont également une classe .my-class, écrivez la commande suivante:

a.my-class {
  color: red;
}

Cela n'applique pas de couleur rouge à tous les liens. De même, la couleur rouge n'est appliquée à .my-class que if il se trouve sur un élément <a>. Pour en savoir plus à ce sujet, consultez le module de spécificité.

Testez vos connaissances

Tester vos connaissances sur les sélecteurs complexes

section.awesome {
  border: 1px solid hotpink;
}

Ressources

• Documentation de référence sur les sélecteurs CSS
• Jeu interactif avec sélecteurs
• Référence sur les pseudo-classes et les pseudo-éléments
• Un outil qui convertit les sélecteurs CSS en explications simples