Sélecteurs

The CSS Podcast - 002: Selectors

Si vous souhaitez que du texte soit plus grand et rouge uniquement s'il s'agit du premier paragraphe d'un article, comment procéder ?

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

Vous utilisez un sélecteur CSS pour trouver cet élément spécifique et appliquer une règle CSS, comme suit.

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

Le CSS vous fournit de nombreuses options pour sélectionner des éléments et leur appliquer des règles, allant du très simple au très complexe, pour vous aider à résoudre des situations comme celle-ci.

Composantes d'une règle CSS

Pour comprendre le fonctionnement des sélecteurs et leur rôle dans le CSS, il est important de connaître les différentes 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.

Image d&#39;une règle CSS avec le sélecteur .my-css-rule.

Dans cette règle CSS, le sélecteur est .my-css-rule, qui recherche tous les éléments de la page avec une classe my-css-rule. Trois déclarations sont contenues dans les accolades. Une déclaration est une paire de propriété et de valeur qui applique des styles aux éléments correspondant aux sélecteurs. Une règle CSS peut contenir 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 pouvant être ajoutés à une balise HTML.

Sélecteur universel

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

* {
  color: hotpink;
}

Cette règle fait en sorte que le texte de chaque élément HTML de la page soit rose vif.

Sélecteur de type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

section {
  padding: 2em;
}

Cette règle fait en sorte que chaque élément <section> ait un 2em de padding sur toutes les faces.

Sélecteur de classe

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Un élément HTML peut comporter un ou plusieurs éléments définis dans son 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>

Tout élément auquel la classe est appliquée sera de couleur rouge:

.my-class {
  color: red;
}

Notez que . n'est présent que dans le CSS et pas dans le code HTML. En effet, le caractère . indique au langage CSS de faire correspondre les membres de l'attribut de classe. Il s'agit d'un modèle courant en CSS, où un caractère spécial ou un ensemble de caractères est utilisé pour définir des types de sélecteurs.

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

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

En effet, le CSS recherche un attribut class qui contient la classe définie, plutôt que de correspondre exactement à cette classe.

Sélecteur d'ID

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Un élément HTML avec un attribut id doit être le seul élément d'une page avec cette valeur d'ID. Vous sélectionnez des éléments à l'aide d'un sélecteur d'ID comme suit:

#rad {
  border: 1px solid blue;
}

Ce CSS appliquerait une bordure bleue à l'élément HTML dont la valeur id est rad, comme suit:

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

Tout comme le sélecteur de classe ., utilisez un caractère # pour demander au CSS de rechercher un élément correspondant à l'id qui le suit.

Sélecteur d'attribut

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

Vous pouvez rechercher des éléments qui possèdent un attribut HTML spécifique ou une valeur spécifique pour un attribut HTML à l'aide du sélecteur d'attribut. Demandez au CSS de rechercher des attributs en encapsulant le sélecteur entre crochets ([ ]).

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

Ce CSS recherche tous les éléments dont l'attribut est data-type et dont la valeur est primary, comme suit:

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

Le texte de ces deux éléments <div> sera rouge.

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

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

Cela signifie que si un élément HTML avait un data-type de Primary au lieu de primary, il n'obtiendrait pas de texte rouge. Vous pouvez faire l'inverse (non-sensibilité à la casse) à l'aide d'un opérateur i.

En plus des opérateurs de casse, 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;
}
Dans cette démonstration, l'opérateur$de notre sélecteur d'attributs récupère le type de fichier à partir de l'attribut "href". Vous pouvez ainsi ajouter un préfixe au libellé (en fonction de ce type de fichier) à l'aide d'un pseudo-élément.

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.

Vérifier vos connaissances

Tester vos connaissances sur les sélecteurs simples

* {}

Quel type de sélecteur simple est utilisé dans l'extrait ci-dessus ?

attribut
[] est utilisé pour les sélecteurs simples d'attribut.
ID
# est utilisé pour les sélecteurs simples ID.
universel
* est le sélecteur simple universel.
classe
. est utilisé pour les sélecteurs simples de classe.
 
div {}

Quel type de sélecteur simple est utilisé dans l'extrait ci-dessus ?

classe
Un . est utilisé pour les sélecteurs simples de classe.
type
Un nom element est utilisé pour les sélecteurs simples de type.
attribut
Les crochets [] sont utilisés pour les sélecteurs simples d'attribut.
ID
Un # est utilisé pour les sélecteurs simples ID.

Pseudo-classes et pseudo-éléments

Le CSS fournit des types de sélecteurs utiles qui se concentrent sur l'état spécifique de la plate-forme, par exemple lorsqu'un élément est en survol, des structures à l'intérieur d'un élément ou des parties d'un élément.

Pseudo-classes

Les éléments HTML se trouvent dans différents états, soit parce qu'ils sont utilisés, soit parce que l'un de leurs éléments enfants se trouve dans un état donné.

Par exemple, un utilisateur peut pointer sur un élément HTML avec le pointeur de la souris ou sur 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 sur les 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 syntaxiquement différents des pseudo-classes, car au lieu d'utiliser 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 ajouté un préfixe au libellé d'un lien avec le type de fichier, 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 styliser 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 styliser le contenu mis en surbrillance par un utilisateur.

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

Pour en savoir plus, consultez le module sur les pseudo-éléments.

Vérifier vos connaissances

Tester vos connaissances sur les pseudo-sélecteurs

Combien de deux-points les sélecteurs de pseudo-éléments utilisent-ils ?

:
Un : est utilisé pour cibler des pseudo-classes.
::
Deux :: sont utilisés pour cibler les pseudo-éléments.
:::
Cette valeur n'est pas valide et ne cible rien.
 
p:hover {
  background: white;
  color: black;
}

Quel type de sélecteur pseudo est utilisé dans l'extrait ci-dessus ?

Pseudo-classe
Un : est utilisé pour cibler des pseudo-classes.
Pseudo-élément
Deux :: sont utilisés pour cibler les pseudo-éléments.

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.

À ce stade, n'oubliez pas que, bien que les sélecteurs suivants nous offrent plus de puissance, nous ne pouvons sélectionner que des éléments enfants en cascade vers le bas. Nous ne pouvons pas cibler vers le haut et sélectionner un élément parent. Nous verrons ce qu'est la cascade et son fonctionnement dans une leçon ultérieure.

Combinateurs

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

Combinateur de descendants

Pour comprendre les combinateurs descendants, vous devez d'abord comprendre les éléments parent et enfant.

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

L'élément parent est le <p> qui contient du texte. Cet élément <p> contient un élément <strong>, ce qui rend 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. Un espace () est utilisé pour indiquer au navigateur de rechercher des éléments enfants:

p strong {
  color: blue;
}

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

Étant donné que le combinateur descendant est récursif, la marge intérieure ajoutée à chaque élément enfant s'applique, ce qui entraîne un effet en escalier.

Cet effet est mieux visualisé dans l'exemple ci-dessus, à l'aide du sélecteur de combinateur, .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 sera 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, à leur tour, comportent des éléments enfants <div>.

Combinateur de 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 les éléments empilés, utilisez le combinator "next sibling" pour ajouter de l'espace uniquement si un élément est un frère 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 tous les éléments enfants de .top, cette règle crée potentiellement un espace supplémentaire inutile. Le combinateur de frère suivant, associé à un sélecteur universel, vous permet non seulement de contrôler les éléments qui reçoivent un espace, mais aussi d'appliquer un espace à n'importe quel élément. Cela vous offre une certaine flexibilité à long terme, quels que soient les éléments HTML qui apparaissent dans .top.

Combinateur de frères et sœurs ultérieurs

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

Utilisez un sélecteur ultérieur avec une pseudo-classe ":checked" pour créer un élément de bouton d'activation/de désactivation CSS pur.

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

Combinateur enfant

Un combinator enfant (également appelé descendant direct) vous permet de mieux contrôler la récursion fournie par les sélecteurs de combinator. En utilisant le caractère >, vous limitez le sélecteur de combinateur à s'appliquer uniquement aux enfants directs.

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

Pour atténuer ce problème, modifiez le sélecteur de frère suivant pour intégrer un combinator enfant: > * + *. La règle ne s'appliquera désormais qu' aux enfants directs de .top.

Sélecteurs composés

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

a.my-class {
  color: red;
}

Cela n'appliquerait pas de couleur rouge à tous les liens et ne l'appliquerait qu'à .my-class if il s'agissait d'un élément <a>. Pour en savoir plus, consultez le module de spécificité.

Vérifier vos connaissances

Tester vos connaissances sur les sélecteurs complexes

Parmi les symboles suivants, lequel n'est pas un combinator de sélecteur ?

>
Combinateur de descendants directs.
÷
Non valide, pas un symbole CSS.
+
Combinateur de frères et sœurs suivant.
*
Ce sélecteur simple universel.
.
Sélecteur de classe simple.
 
section.awesome {
  border: 1px solid hotpink;
}

Le sélecteur ci-dessus est un exemple de...

Combinateur
Symbole utilisé pour combiner des sélecteurs en un sélecteur plus spécifique.
Sélecteur de composés
Lorsque deux sélecteurs ou plus sont utilisés ensemble, sans combinator, afin de créer un sélecteur plus spécifique.
Terminator
Ce n'est pas un type de sélecteur, mais ça y ressemble, n'est-ce pas ? 🤖

Ressources