Sélecteurs

Podcast CSS – 002: Sélecteurs

Si vous avez du texte que vous voulez seulement être plus grand et rouge s'il s'agit du premier paragraphe d'un article, comment faire ?

<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 celle-ci.

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

Le CSS offre de nombreuses options pour sélectionner des éléments et leur appliquer des règles, allant de très simple à très complexe, pour aider à résoudre ce genre de situations.

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 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. qui recherche tous les éléments avec une classe de 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 correspondant aux 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 le plus simple de sélecteurs cible les éléments HTML plus classes, identifiants et autres attributs pouvant ê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 affiche du texte en rose.

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> présente une valeur 2em de padding de tous les côtés.

Sélecteur de classe

Un ou plusieurs éléments peuvent être définis dans l'attribut class d'un élément HTML. La Sélecteur de classe correspond à tout élément auquel 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 s'affiche en rouge:

.my-class {
  color: red;
}

Notez que . n'est présent que dans le code CSS, et non 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 les types de sélecteur.

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

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

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

Sélecteur d'ID

Seul un élément HTML doté d'un attribut id doit être associé à cet ID sur une page. Vous sélectionnez des éléments avec Sélecteur d'ID comme suit:

#rad {
  border: 1px solid blue;
}

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

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

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

Sélecteur d'attributs

Vous pouvez rechercher des éléments qui ont un certain attribut HTML, ou une valeur pour un attribut HTML, à l'aide du sélecteur d'attributs. Indiquez au CSS de rechercher des attributs en entourant le sélecteur de 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 ceci:

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

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

[data-type] {
  color: red;
}

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

Ces deux éléments <div> seront accompagnés de texte en rouge.

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

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

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

En plus des opérateurs de cas, vous avez accès aux 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>. Elle est également étendue à une classe nommée .my-class et à un élément qui possède un attribut lang.

Testez vos connaissances

Tester vos connaissances sur les sélecteurs simples

* {}

div {}

Pseudo-classes et pseudo-éléments

Le CSS fournit des types de sélecteur utiles qui se concentrent sur un état spécifique de la plate-forme. Par exemple, lorsque l'utilisateur pointe sur un élément, structure à l'intérieur ou certaines parties d'un élément.

Pseudo-cours

Les éléments HTML se trouvent dans différents états, soit parce qu'ils font l'objet d'interactions, ou si l'un de leurs éléments enfants est dans un certain état.

Par exemple, un utilisateur peut survoler un élément HTML avec le pointeur de la souris ou l'utilisateur peut pointer 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 de pseudo-cours.

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èrent un nouvel élément avec CSS. Les pseudo-éléments sont également syntaxiquement différents des pseudo-classes, En effet, 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 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 toutefois 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 évidence par un utilisateur.

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

Pour en savoir plus, consultez le module sur les 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 parfois, vous aurez besoin d'un contrôle plus précis avec votre CSS. C'est là que des sélecteurs complexes entrent en jeu.

Il convient de se rappeler à ce stade que, bien que les sélecteurs suivants nous donnent plus de puissance, nous ne pouvons que basculer vers le bas, en sélectionnant des éléments enfants. Impossible de cibler vers le haut et de sélectionner un élément parent. Nous verrons ce qu'est la cascade et son fonctionnement. dans une prochaine leçon.

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 combinateurs vous aident à 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 <p>, qui contient du texte. Cet élément <p> contient un élément <strong>, ce qui met son contenu en gras. Comme il se trouve à l'intérieur de <p>, il s'agit d'un élément enfant.

Un combinateur descendant 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 des éléments <p> uniquement, ce qui les rend bleus de manière récursive.

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

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

Combinateur frère suivant

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

Pour ajouter de l'espace entre des éléments empilés, utiliser le combinateur frère suivant pour ajouter de l'espace uniquement si un élément est le 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 tous les éléments enfants de .top, cette règle peut créer de l'espace supplémentaire inutile. Le combinateur frère suivant, Associé à un sélecteur universel, vous pouvez non seulement contrôler quels éléments obtiennent de l'espace, mais aussi appliquer de l'espace à n'importe quel élément. Vous bénéficiez ainsi d'une certaine flexibilité sur le long terme, quels que soient les éléments HTML qui apparaissent dans .top.

Combinateur de frères et sœurs suivant

Un combinateur suivant est très semblable à un sélecteur de sœur suivant. Cependant, au lieu d'un caractère +, utilisez un caractère ~. La différence réside dans le fait qu'un élément doit simplement suivre un autre élément ayant le même parent, au lieu d'être l'élément suivant avec le même parent.

Le combinateur suivant apporte un peu moins de rigidité, ce qui est utile dans des contextes comme l'exemple ci-dessus, Ici, nous changeons la couleur d'un commutateur personnalisé lorsque la case à cocher qui lui est associée a l'état :checked.

Combinateur enfant

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

Prenons l'exemple précédent de sélecteur de frères et sœurs. L'espace est ajouté à chaque sœur suivant, Toutefois, 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 atténuer ce problème, modifiez le sélecteur de frère 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>, possédant également une classe .my-class, écrivez ce qui suit:

a.my-class {
  color: red;
}

Le rouge n'est pas appliqué à tous les liens De plus, la couleur rouge n'est appliquée à .my-class que si la couleur rouge est appliquée à 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 de pseudo-classe et de pseudo-éléments
• Un outil qui traduit les sélecteurs CSS en explications simples