CSS Selectors Every Web Developer Must Know in 2023

Sélecteurs CSS que chaque développeur Web doit connaître en 2023

Apprendre l'alignement vertical CSS Grid en 2 minutes Vous lisez Sélecteurs CSS que chaque développeur Web doit connaître en 2023 9 minutes Suivant Apprendre CSS Grid : Un guide complet 101

Gagnez du temps en recherchant les sélecteurs CSS importants.

Un guide complet peut aider les développeurs Web à éviter les erreurs courantes et à adopter une approche cohérente et efficace pour utiliser les sélecteurs CSS.

Ce guide est un guichet unique pour tous les sélecteurs CSS les plus utiles et les plus populaires que les développeurs peuvent consulter.

Que sont les sélecteurs en CSS ?

Les sélecteurs CSS sont utilisés pour cibler des éléments spécifiques sur la page Web. De plus, les sélecteurs sont la clé de tout le processus de style et de modification de la page Web et de ses éléments.

Il existe plusieurs types de sélecteurs CSS et vous allez les apprendre presque tous.

Sélecteur de classe

Le sélecteur de classe CSS joue un rôle très important lorsque nous parlons de mise en page ou de structure. Vous pouvez donc dire que c'est un sélecteur incontournable dans votre code.

Points clés:

  • Le symbole point ou point (.) est utilisé pour sélectionner une classe en CSS.
  • La classe peut être utilisée pour sélectionner plusieurs éléments à la fois.
  • La classe est réutilisable

Exemple:

Changez la couleur d'arrière-plan de tous les éléments portant le nom de classe " modal ".

sélecteur de classe sélecteurs CSS

Sélecteur CSS d'ID

Les sélecteurs d'ID sont utilisés pour cibler un élément unique de la page. Cela signifie « Identifiant ».

Points clés:

  • Le symbole hash ( # ) est utilisé pour sélectionner un identifiant dans la classe
  • Il doit être unique pour une page ou un document.
  • Les identifiants ne sont pas réutilisables. Vous ne devriez jamais préférer en utiliser plusieurs sur une page.

Exemple:

Changez la couleur de fond de la page d'accueil.

sélecteur d'identifiant sélecteurs CSS

Sélecteur CSS universel

Le sélecteur universel (*) est un sélecteur CSS qui correspond à chaque élément.

Points clés:

  • Le Symbole Astérix ( * ) est utilisé pour sélectionner tous les éléments.
  • Les développeurs l'utilisent principalement pour réinitialiser le remplissage, les marges et quelques comportements par défaut du navigateur.
  • Vous devriez toujours l'utiliser.

Exemple:

Réinitialisez tous les remplissages et marges par défaut du navigateur à zéro.

sélecteur CSS universel

Sélecteur CSS de regroupement

Considérez cela comme un sélecteur d'optimisation. Vous pouvez regrouper plusieurs sélecteurs et leur appliquer des styles communs. Assez utile.

Points clés:

  • La virgule du symbole ( , ) est utilisée pour sélectionner plusieurs éléments à la fois.
  • Les développeurs l'utilisent principalement pour optimiser le code
  • Cela réduit le temps d'écriture du même code plusieurs fois pour des éléments similaires

Exemple:

Il existe quatre variantes de boutons. Mais il suffit d'appliquer border-radius à .btn-primary et .btn-secondary

Au lieu de faire ceci :

.btn-primaire{ }

.btn-secondaire{}

Utilisez le sélecteur CSS de regroupement :

regroupement du sélecteur CSS

Sélecteur CSS d'élément

Le sélecteur d'élément ou de type nous permet de choisir n'importe quel élément HTML avec son nom sur la page et de commencer à le styliser avec les règles CSS.

points clés:

  • Vous pouvez sélectionner n'importe quel élément portant le nom
  • C'est assez simple
  • Les développeurs l'utilisent principalement pour ajouter des styles par défaut pour les éléments

Exemple:

Ajouter font-family, font-size à l'élément body

sélecteur d'élément ou de type CSS

Sélecteur de descendants

Le sélecteur de combinateur descendant inclut tous les éléments qui sont des enfants de l'élément actuel. En CSS, cela signifie que cela affecte n'importe quel nœud enfant.

Points clés:

  • Il n'y a pas de symbole, juste un espace entre le parent et les enfants
  • C'est un sélecteur CSS très courant

Exemple:

Sélectionnez tous les éléments de paragraphe à l’intérieur d’un conteneur et ajoutez-leur de la couleur rouge.

sélecteur CSS descendant

Sélecteur CSS enfant direct

Le sélecteur CSS du combinateur d'enfants sélectionne tous les enfants directs spécifiés du parent.

Points clés:

  • Le symbole plus grand ( > ) est utilisé pour sélectionner les enfants directs.
  • C'est un sélecteur CSS très rare mais nécessaire.

Exemple:

Ajoutez la couleur d'arrière-plan uniquement aux éléments de bouton qui sont des enfants directs de .container

sélecteur CSS enfant direct

Sélecteur de frères et sœurs adjacents

Le sélecteur de frères et sœurs adjacents sélectionne tous les frères et sœurs qui sont côte à côte sur la même ligne.

Points clés:

  • Il contient le signe « + ».
  • Les développeurs l'utilisent pour de nombreux cas d'utilisation
  • Premier arrivé, premier servi, il sélectionne le premier élément qui vient après le frère ou la sœur.

Exemple:

Ajouter un affichage : aucun ; à la propriété de tous les éléments span directs (premiers) qui sont à côté des éléments div

Sélecteur de frères et sœurs adjacents

Sélecteur général de frères et sœurs

Tous les éléments qui sont les prochains frères et sœurs de l'élément spécifié sont sélectionnés par le sélecteur général de frères et sœurs.

Points clés:

  • Il contient le signe « ~ ».
  • Il sélectionne tous les prochains frères et sœurs spécifiés de l'élément

Exemple:

Ajouter de la couleur : noir ; à tous les prochains frères et sœurs spécifiés (p) de l'élément (div).

div ~ p {

la couleur noire;

}

sélecteur CSS général

Sélecteur d'attribut

Il sélectionne les éléments en fonction d'attributs donnés.

Points clés:

  • Vous pouvez utiliser des crochets pour sélectionner les attributs
  • C'est un puissant sélecteur CSS, les développeurs l'utilisent en appliquant des conditions
  • Il existe plusieurs conditions que vous pouvez utiliser intelligemment avec le sélecteur d'attribut (=, ~=, ^=, $=, *=, attribut|="valeur")

Syntaxe avec exemples :

Vous pouvez utiliser un sélecteur d'attributs basé sur plusieurs conditions différentes et ces conditions avec des exemples sont données ci-dessous.

Égal

Ajoutez de la couleur rouge à tous les éléments d'ancrage où href est égal au hachage "#"

sélecteurs CSS par attribut

Contenir Limité

Ajoutez border-radius à tous les éléments img où la balise alt contient le mot "circle"

Remarque rapide : une valeur doit être un mot entier.

le sélecteur CSS d'attribut contient

Contenir Flexible

Ajoutez 500px de largeur à tous les éléments img où la balise alt contient le mot "opt"

Remarque rapide : une valeur n'a pas besoin d'être un mot entier

S'il y a 3 images avec des balises alt (optimiser-img, optimiser-img, optimiser-img). Il sélectionnera les trois images. Parce que chacun contient opt ​​.

le sélecteur CSS d'attribut contient des éléments flexibles

Commencer avec Limité

Ajoutez la largeur de 500 px à tous les éléments img où la balise alt commence par la valeur "optimiser"

Remarque rapide : une valeur doit être un mot entier

s'il y a 3 images avec des balises alt (optimiser-img, optimiser-img, optimiser-img). Il ne sélectionnera que les première et troisième images. Parce que le second n’est pas un mot complet.

commencer par le sélecteur CSS d'attribut

Commencer avec Flexible

Ajoutez le border-radius à tous les éléments img où la balise alt commence par la valeur "radius"

Remarque rapide : une valeur n'a pas besoin d'être un mot entier

S'il y a 3 images avec des balises alt (radius-circle, radiuscircle, radius-circle). Il sélectionnera les trois images. Parce qu'ils commencent tous par radius .

commencer par l'attribut sélecteur CSS flexible

Se termine par

Ajoutez la couleur rouge à tous les paragraphes où la valeur de l'attribut de classe se termine par alert.

Remarque rapide : il n'est pas nécessaire que la valeur soit un mot entier !

se termine par un sélecteur CSS d'attribut

Et ouais ! C'est tout pour les sélecteurs CSS d'attribut.

Sélecteur du premier enfant

Comme son nom l'indique, il sélectionne le premier enfant dans la liste des enfants.

Points clés:

  • :le premier enfant est une pseudo-classe
  • Les développeurs l'utilisent notamment dans de nombreux cas (en ajoutant l'espacement en haut de la liste)

Exemple:

Ajoutez une marge en haut au premier élément de la liste des catégories.

pseudo-sélecteur CSS du premier enfant

Sélecteur du dernier enfant

Comme son nom l'indique, il sélectionne le dernier enfant dans la liste des enfants.

Points clés:

  • :last-child est une pseudo-classe
  • Les développeurs l'utilisent notamment dans de nombreux cas (en ajoutant l'espacement en fin de liste)

Exemple:

Ajoutez une bordure inférieure à la fin de la liste des catégories (élément).

sélecteur de pseudo CSS du dernier enfant

Sélecteur de première lettre

Il sélectionne la première lettre du paragraphe.

Points clés:

  • ::first-letter est un pseudo-élément
  • C'est très utile pour faire la première lettre en majuscule ou en gros (comme on le voit dans le journal)

Exemple:

Augmentez la taille de la police de la première lettre de chaque paragraphe.

sélecteur CSS de première lettre

Sélecteur de première ligne

Semblable à la première lettre, vous pouvez même sélectionner la première ligne d’un paragraphe.

Exemple:

Augmentez le poids de la police de la première ligne de chaque paragraphe.

sélecteurs CSS de première ligne

:nth-child(value) Sélecteur CSS

Semblable à :first-child et :last-child, il sélectionne l'élément en fonction de la valeur donnée.

Points clés:

  • :nth-child est une pseudo-classe
  • À un niveau de base, il accepte la valeur entière

Exemple:

Ajoutez la couleur de fond au 5ème enfant de 11 cases.

nième sélecteur CSS enfant

Conclusion

Il est essentiel de connaître les sélecteurs CSS pour pouvoir les utiliser correctement dans vos projets.

Dans ce didacticiel, vous avez découvert les sélecteurs CSS les plus importants, que vous verrez de temps en temps. Vous pouvez toujours l'utiliser comme aide-mémoire unique pour les sélecteurs CSS.

Sélecteur CSS extrêmement puissant

Avant de partir, il existe un sélecteur CSS conditionnel extrêmement puissant que je n'ai pas mentionné.

Ne vous inquiétez pas, je l'ai également couvert dans un guide autonome. Allez-y et regardez dans le sélecteur :not css

Assurez-vous de partager ce guide avec d'autres et abonnez-vous à notre newsletter pour des didacticiels de développement Web plus rapides.

Nos guides de codage :