Maison > Article > interface Web > Maîtriser les CSSelectors : un guide complet avec des exemples
Maîtriser les CSSelectors : un guide complet avec des exemples
- 王林original
- 2024-09-07 00:00:27741parcourir
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
p::after { content: "*"; } - Cela ajoutera un astérisque (*) après chaque paragraphe.
.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.
blockquote::first-line { font-weight: bold; } - Cela mettra en gras la première ligne de chaque blockquote.
div::first-letter { text-transform: majuscule; } - Cela transformera la première lettre de chaque div en majuscule.
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;}
Cela sélectionnera tous les
éléments qui sont les descendants d'un
Combinateurs d'enfants
Un combinateur enfant est désigné par >. Il sélectionne les éléments qui sont des enfants directs d'un certain élément.
Exemples :
div > p { color: blue;}
Cela sélectionnera tous les
éléments qui sont des enfants directs d'un
div > p { border: 1px solid red;}
This will select all
elements that are direct children of a
Adjacent Sibling Combinators
An adjacent sibling combinator is denoted by +. It selects an element that is directly after another specific element.
Example:
div + p { color: blue;}
This will select any
element that is directly after a
General Sibling Combinators
A general sibling combinator is denoted by ~. It selects elements that are siblings of a certain element.
Example:
div ~ p { color: blue;}
This will select all
elements that are siblings of a
Advanced CSS3 Selectors
Advanced CSS3 selectors provide more precise targeting capabilities than basic selectors. These include attribute selectors with various matchers and nth-child/nth-of-type selectors.
Attribute Selectors with Various Matchers
Attribute selectors can be used with various matchers to select elements based on specific conditions related to their attributes.
Example:
input[type="text"] {
color: blue;
}
This will select all input elements with the type attribute of "text" and color the text blue.
Nth-child and Nth-of-type Selectors
The nth-child and nth-of-type selectors are used to select elements based on their position in the parent element.
Example:
p:nth-child(2) {
color: red;
}
This will select the second child paragraph of its parent element and color the text red.
Short Coding Examples
Attribute Selector with Matcher: a[href^="https"] {font-style: italic;} - This will select all links that have an href attribute that starts with "https" and make the text italic.
Attribute Selector with Matcher: input[type$="text"] {background-color: yellow;} - This will select all input elements that have a type attribute that ends with "text" and give them a yellow background.
Nth-child Selector: li:nth-child(odd) {background-color: grey;} - This will select all odd-numbered list items and give them a grey background.
Nth-of-type Selector: p:nth-of-type(3n) {font-weight: bold;} - This will select every third paragraph and make the text bold.
Best Practices for Using CSS3 Selectors
Use the Right Selector : The key to using CSS3 selectors effectively is to use the right selector for the job. For instance, use class selectors when you want to style a group of elements and ID selectors for unique elements.
Avoid Over-Specification : Over-specifying selectors can make your CSS hard to maintain. Stick to simple selectors as much as possible.
Use Shorthand Properties : Shorthand properties can make your CSS cleaner and easier to read. For example, use margin: 0 auto; instead of margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;.
Group Selectors : If multiple selectors share the same style declaration, group them together to keep your CSS DRY (Don't Repeat Yourself).
Comment Your Code : Commenting your CSS can help you and others understand what your code does, especially when using complex selectors.
Use Pseudo-classes and Pseudo-elements : These can help you target elements based on their state or position in the document, which can make your CSS more dynamic and responsive.
Keep Specificity Low : Overly specific selectors can lead to specificity wars, making it hard to override styles later. Keep your specificity as low as possible.
Test Across Different Browsers : Different browsers can interpret CSS selectors differently. Always test your CSS across different browsers to ensure consistency.
Conclusion
In conclusion, selectors, ranging from basic type, class, and ID selectors to advanced pseudo-classes, pseudo-elements, and combinators, provide a powerful toolset for styling HTML elements. By understanding and applying these selectors, you can create dynamic, responsive, and aesthetically pleasing websites.
However, it's important to follow best practices such as using the right selector for the job, avoiding over-specification, grouping selectors, and testing across different browsers to ensure the maintainability and consistency of your CSS code.
? Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.
? Si vous avez aimé cet article, pensez à le partager.
? Tous les liens | X | LinkedIn
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Comment geler le panneau Chrome DevTools pour l'inspection Popover ?
- Comment obtenir un anticrénelage cohérent pour @font-face sur Windows et Mac ?
- Comment obtenir un texte bicolore sans dupliquer le contenu ?
- Comment maintenir le rapport hauteur/largeur d'une division avec CSS pour un affichage réactif ?
- Comment créer des formes triangulaires avec des images d'arrière-plan à l'aide de CSS3 ?