Maîtriser les CSSelectors : un guide complet avec des exemples

Introduction

Dans cet article, nous parlerons des sélecteurs CSS3, un outil vraiment puissant pour tous ceux qui veulent faire plus tout en écrivant moins. Que vous débutiez ou que vous perfectionniez vos compétences, ce guide vous guidera des bases aux éléments avancés.

Prêt à améliorer vos compétences CSS ? Commençons !

Sélecteurs CSS3 de base

Les sélecteurs sont les outils que nous utilisons pour sélectionner certains éléments de l'arborescence HTML. Les sélecteurs CSS3 de base, comme leur nom l'indique, sont les sélecteurs fondamentaux que tout développeur devrait avoir dans sa boîte à outils. Ils incluent les sélecteurs Type , Class , ID , Universel et Attribute. Approfondissons chacun d'entre eux.

Sélecteurs de types

Ces sélecteurs ciblent les éléments HTML en fonction de leur nom de balise. Par exemple, p { couleur : bleu ; } stylisera tous les éléments du paragraphe en bleu.

Sélecteurs de classe

Ces sélecteurs ciblent les éléments HTML en fonction de leur attribut de classe. Par exemple, .alert { color: red; } stylisera tous les éléments avec la classe "alert" en rouge.

Sélecteurs d'ID

Ces sélecteurs ciblent un élément unique qui possède l'attribut id spécifique. Par exemple, #navbar { background-color: black; } stylisera l'élément avec l'identifiant "navbar" avec un fond noir.

Sélecteurs universels

Ces sélecteurs ciblent tous les éléments d'une page. Par exemple, * { margin: 0; } supprimera la marge de tous les éléments de la page.

Sélecteurs d'attributs

Ces sélecteurs ciblent les éléments en fonction de leur attribut et de leur valeur. Par exemple, a[href="https://google.com"] { color: blue; } stylisera tous les liens dirigeant vers Google en bleu.

Exemples de codage courts

• Sélecteur de type : h1 { couleur : vert ; } colorera tous les en-têtes h1 en vert.

• Sélecteur de type : p { font-size: 16px; } sélectionnera tous les éléments de paragraphe (

  ) et définira leur taille de police sur 16 pixels.

• Sélecteur de classe : .info { font-size: 18px; } définira la taille de police de tous les éléments avec la classe "info" sur 18px.

• Sélecteur de classe : .highlight { background-color: jaune; } sélectionnera tous les éléments avec la classe "highlight" et définira leur couleur d'arrière-plan sur jaune.

• Sélecteur d'ID : #footer { padding: 20px; } ajoutera un remplissage de 20px à l'élément avec l'identifiant "pied de page".

• Sélecteur d'ID : #header { hauteur : 60px ; } sélectionnera l'élément avec l'ID "en-tête" et définira sa hauteur sur 60 pixels.

• Sélecteur universel : * { font-family: Arial, sans-serif; } définira la police de tous les éléments sur Arial.

• Sélecteur universel : * { box-sizing: border-box; } sélectionnera tous les éléments de la page et définira leur propriété de dimensionnement de boîte sur "border-box", qui inclut le remplissage et la bordure dans la largeur et la hauteur totales de l'élément.

• Sélecteur d'attribut : img[alt] { border : 2px solid black ; } ajoutera une bordure à toutes les images qui ont un attribut alt.

• Sélecteur d'attribut : input[type="text"] { width: 100%; } - Cela sélectionnera tous les éléments d'entrée de type "texte" et définira leur largeur à 100 % de leur conteneur parent.

Sélecteurs de pseudo-classe

Les sélecteurs de pseudo-classe sont une fonctionnalité puissante de CSS qui nous permet de sélectionner et de styliser des éléments en fonction de leur état ou de leur position dans la structure du document plutôt que de leur type, attribut ou classe. Ils jouent un rôle déterminant dans la création de designs dynamiques et réactifs.

Pseudo-Classes Dynamiques

Les pseudo-classes dynamiques incluent des styles qui changent en fonction de l'interaction de l'utilisateur. Par exemple, a:hover { color: red; } changera la couleur des liens en rouge lorsque vous les survolerez.

Pseudo-classes structurelles

Les pseudo-classes structurelles sélectionnent les éléments en fonction de leur position dans la structure du document. Par exemple, p:first-child { font-weight: bold; } mettra le premier paragraphe en gras dans son élément conteneur.

Pseudo-classe de négation

La pseudo-classe de négation, :not(), exclut un élément spécifique d'une sélection. Par exemple, div:not(.highlight) { background-color: jaune; } changera la couleur d'arrière-plan de tous les div en jaune, à l'exception de ceux avec la classe "highlight".

Saisir des pseudo-classes

Les pseudo-classes d'entrée sont utilisées pour styliser les éléments de formulaire en fonction de leur état. Par exemple, input:disabled { opacity: 0.5; } stylisera les champs de saisie désactivés avec une demi-opacité.

Exemples de codage courts

• Pseudo-classe dynamique : a:focus { outline: none; } supprimera le contour du focus des liens lorsque vous cliquez dessus ou que vous y accédez via le clavier.

• Pseudo-Classe Dynamique : bouton:active { background-color: red; } changera la couleur d'arrière-plan d'un bouton en rouge lorsqu'on clique dessus.

• Pseudo-Classe Structurelle : li:last-child { color: red; } colorera le dernier élément de la liste en rouge dans chaque liste.

• Pseudo-Classe Structurelle : p:nth-child(2) { color: blue; } sélectionnera le deuxième paragraphe dans son élément parent et colorera le texte en bleu.

• Pseudo-classe de négation : p:not(.no-border) { border: 1px solid black; } ajoutera une bordure à tous les paragraphes qui n'ont pas la classe "no-border".

• Pseudo-classe de négation : div:not(#exclude) { border: 1px solid green; } ajoutera une bordure à tous les éléments div qui n'ont pas l'identifiant "exclure".

• Pseudo-classe d'entrée : input:checked { background-color: green; } changera la couleur d'arrière-plan des éléments d'entrée cochés en vert.

• Pseudo-classe d'entrée : input:valid { border: 2px solid green; } ajoutera une bordure verte à tous les champs de saisie valides en fonction de leurs règles de validation.

Pseudo-Classe Éléments

Les sélecteurs de pseudo-éléments nous permettent de styliser certaines parties d'un document. Ils peuvent être utilisés pour styliser la première lettre ou ligne d'un élément ou insérer du contenu avant ou après un élément HTML.

Pseudo-éléments avant et après

Ces pseudo-éléments permettent d'insérer du contenu avant ou après le contenu d'un élément.

Exemple :

p::before { 
content: "Read this - "; 
color: red;
}

Cela insérera "Lire ceci -" avant le contenu de chaque paragraphe et le colorera en rouge.

Première lettre et pseudo-éléments de première ligne

Ces pseudo-éléments sont utilisés pour styliser la première lettre ou la première ligne d'un bloc de texte.

Exemple :

p::first-letter { 
font-size: 20px; 
color: blue;
}

Cela rendra la première lettre de chaque paragraphe de 20 pixels et de couleur bleue.

Exemples de codage courts

1. p::after { content: "*"; } - Cela ajoutera un astérisque (*) après chaque paragraphe.

2. .warning::before { content: "AVERTISSEMENT : " ; poids de la police : gras ; couleur : rouge ; } - Cela ajoutera "WARNING: " avant le contenu des éléments avec la classe "warning". Le texte sera en gras et en rouge.

3. blockquote::first-line { font-weight: bold; } - Cela mettra en gras la première ligne de chaque blockquote.

4. div::first-letter { text-transform: majuscule; } - Cela transformera la première lettre de chaque div en majuscule.

5. h1::after { content: ""; couleur : vert ; } - Cela ajoutera une coche verte après chaque élément h1.

Exemples de codepen

Les pseudo-éléments et les pseudo-classes sont quelques-uns de mes sélecteurs préférés et pour vraiment les comprendre, je vous suggère de faire beaucoup de pratique.

Voici quelques exemples sur Codepen que vous pouvez expérimenter :

Exemple 1

Tutoriel

Exemple 2

Tutoriel

Exemple 3

Tutoriel

Ces exemples semblent simples mais si vous vérifiez le code, vous remarquerez qu'ils sont réalisés avec très peu de pseudo-classes !

Sélecteurs de combinateur

Les sélecteurs combinateurs en CSS sont un moyen puissant de sélectionner des éléments spécifiques qui remplissent certains critères relationnels avec d'autres éléments. Ces sélecteurs nous permettent de cibler des éléments en fonction de leur relation dans l'arborescence du document, par exemple si un élément est un enfant, un descendant ou un frère d'un autre élément.

Combinateurs descendants

Un combinateur descendant est désigné par un espace. Il sélectionne les éléments qui sont les descendants d'un certain élément.

Exemples :

div p { color: blue;}

Cela sélectionnera tous les

éléments qui sont les descendants d'un

div p { background-color: yellow;}

div > p { color: blue;}

div > p { border: 1px solid red;}

div + p { color: blue;}

div ~ p { color: blue;}

input[type="text"] { 
color: blue;
}

p:nth-child(2) { 
color: red;
}