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 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 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 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 :
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 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 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 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 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 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 "#"
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.
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 .
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 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 .
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 !
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.
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 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 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.
: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.
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.
