Sélecteurs CSS
Introduction aux sélecteurs CSS
Les sélecteurs CSS sont un concept fondamental en développement web qui vous permettent de cibler et de styliser des éléments HTML spécifiques sur une page web. Ce sont des motifs utilisés pour sélectionner les éléments que vous souhaitez styliser, en fonction de leur type, classe, ID, attribut ou relation avec d'autres éléments.
Les sélecteurs CSS vous donnent le contrôle sur le style de vos pages web. Avec les sélecteurs, vous pouvez appliquer des styles à des éléments spécifiques ou à des groupes d'éléments selon certaines conditions. Cette précision vous permet de créer des styles cohérents et faciles à maintenir sur l'ensemble de votre site web.
La syntaxe de base d'un sélecteur CSS se compose du nom du sélecteur suivi d'accolades {}. À l'intérieur des accolades, vous définissez les styles que vous souhaitez appliquer.
Conseil: Sélectionner tous les éléments de paragraphe et rendre leur couleur de texte bleue
p {
color: blue;
}p est le sélecteur qui cible tous les éléments <p>, et color: blue; définit la couleur du texte.
Les sélecteurs CSS peuvent être plus complexes que simplement cibler des éléments par leur nom de balise. Vous pouvez utiliser des noms de classe, des ID, des attributs et divers autres sélecteurs pour cibler des éléments spécifiques ou des groupes d'éléments. Les sections suivantes couvriront différents types de sélecteurs CSS et comment les utiliser dans vos feuilles de style.
Types de sélecteurs CSS
Le CSS offre différents types de sélecteurs qui permettent de cibler des éléments selon divers critères.
Sélecteurs d'éléments
Les sélecteurs d'éléments ciblent les éléments en fonction de leur nom de balise. Ils sélectionnent toutes les instances d'un élément HTML spécifique sur une page.
Pour utiliser un sélecteur d'élément, utilisez simplement le nom de la balise sans préfixe.
Conseil: Sélectionner tous les éléments <h1> et rendre leur texte rouge
h1 {
color: red;
}D'autres exemples incluent p, div, a, img.
Sélecteurs de classe
Les sélecteurs de classe ciblent les éléments en fonction de leur attribut de classe. Ils permettent de sélectionner les éléments qui appartiennent à une classe spécifique.
Pour créer un sélecteur de classe, utilisez un point (.) suivi du nom de la classe.
Conseil: Sélectionner les éléments avec la classe 'highlight' et leur donner un arrière-plan jaune
.highlight {
background-color: yellow;
}Vous pouvez appliquer une classe à un élément en ajoutant l'attribut class à la balise HTML :
Conseil: Appliquer une classe à un élément
<p class="highlight">Ce paragraphe aura un arrière-plan jaune.</p>Un élément peut avoir plusieurs classes en les séparant par des espaces :
Conseil: Un élément avec plusieurs classes
<p class="highlight bold">Ce paragraphe aura un arrière-plan jaune et un texte en gras.</p>Sélecteurs d'ID
Les sélecteurs d'ID ciblent les éléments en fonction de leur attribut ID unique. Ils sélectionnent un élément avec un ID spécifique.
Pour créer un sélecteur d'ID, utilisez un dièse (#) suivi du nom de l'ID.
Conseil: Sélectionner l'élément avec l'ID 'header' et mettre son texte en majuscules
#header {
text-transform: uppercase;
}Vous pouvez appliquer un ID à un élément en ajoutant l'attribut id à la balise HTML :
Conseil: Appliquer un ID à un élément
<h1 id="header">Ce titre sera en majuscules.</h1>La différence principale entre les classes et les ID est que les ID sont uniques et utilisés une seule fois par page, tandis que les classes peuvent être réutilisées plusieurs fois.
Sélecteurs d'attributs
Les sélecteurs d'attributs ciblent les éléments en fonction de leurs attributs ou valeurs d'attributs.
Pour créer un sélecteur d'attribut, utilisez des crochets ([]) et spécifiez le nom de l'attribut ou à la fois le nom et la valeur.
Conseil: Sélectionner tous les éléments <a> avec l'attribut 'target' et mettre leur texte en gras
a[target] {
font-weight: bold;
}Vous pouvez également sélectionner des éléments en fonction de la valeur :
Conseil: Sélectionner tous les éléments <input> avec type='text' et leur donner des bordures
input[type="text"] {
border: 1px solid black;
}Les sélecteurs d'attributs offrent de la flexibilité pour cibler en fonction des attributs.
Sélecteurs de descendants
Les sélecteurs de descendants ciblent les descendants d'un autre élément.
Pour créer ce sélecteur, utilisez un espace entre les sélecteurs d'ancêtre et de descendant.
Conseil: Cibler tous les <p> à l'intérieur des <div>
div p {
font-style: italic;
}Cela cible tous les <p> à l'intérieur de n'importe quel niveau d'imbrication dans un <div>.
Sélecteurs d'enfants
Les sélecteurs d'enfants ciblent les enfants directs d'un autre élément.
Utilisez le signe supérieur à (>) entre parent et enfant pour ce sélecteur :
Conseil: Cibler les enfants directs <li> dans <ul>
ul > li {
list-style-type: none;
}La différence avec le descendant est que l'enfant ne cible que les enfants immédiats.
Sélecteur de frère adjacent
Le sélecteur de frère adjacent sélectionne les frères adjacents partageant le même parent directement à côté les uns des autres en utilisant un signe plus (+).
Conseil: Cibler le premier <p> immédiatement après <h2>
h2 + p {
margin-top: 10px;
}Cela cible le premier <p> après <h2>.
Sélecteur de frère général
Le sélecteur de frère général sélectionne les frères partageant le même parent, pas nécessairement à côté les uns des autres, en utilisant un tilde (~).
Conseil: Cibler tous les <p> frères de <h2>
h2 ~ p {
padding-left: 20px;
}Cela cible tous les <p> frères, quelle que soit leur position par rapport à <h2>.
Sélecteur de pseudo-classe
La pseudo-classe cible les éléments en fonction d'un état ou d'une condition spécifique en utilisant deux-points (:) suivis du nom.
Conseil: Changer la couleur au survol
a:hover {
color: red;
}D'autres exemples incluent :active, :focus, :visited, :first-child.
Sélecteur de pseudo-élément
Le pseudo-élément permet de sélectionner et de styler des parties sans modifier la structure HTML en utilisant deux deux-points (::) suivis du nom.
Conseil: Insérer du contenu avant chaque <h1>
h1::before {
content: "→";
}D'autres exemples incluent ::after, ::first-letter, ::first-line.
Combinaison de sélecteurs
Le CSS vous permet de combiner plusieurs sélecteurs pour créer des styles plus spécifiques. En utilisant une combinaison de sélecteurs, vous pouvez appliquer des styles à des éléments qui répondent à plusieurs critères.
Pour combiner des sélecteurs, écrivez-les les uns après les autres sans espace entre eux. L'ordre des sélecteurs est important car il détermine la spécificité et la manière dont les styles seront appliqués.
Conseil: Cibler tous les éléments <p> avec la classe 'highlight' à l'intérieur d'un <div>
div p.highlight {
background-color: yellow;
font-weight: bold;
}Lors de la combinaison de sélecteurs, il est important de comprendre la spécificité et l'ordre en cascade. La spécificité détermine quels styles ont la priorité lorsque plusieurs sélecteurs ciblent le même élément. Plus un sélecteur est spécifique, plus sa priorité est élevée.
L'ordre de spécificité du plus élevé au plus bas est :
- Styles en ligne (appliqués directement avec l'attribut
style) - Sélecteurs d'ID
- Sélecteurs de classe, sélecteurs d'attribut et sélecteurs de pseudo-classe
- Sélecteurs d'élément et sélecteurs de pseudo-élément
Si deux sélecteurs ont la même spécificité, celui qui apparaît plus tard dans la feuille de style aura la priorité.
Conseil: Comprendre la spécificité
/* Sélecteur d'élément */
p {
color: black;
}
/* Sélecteur de classe */
.highlight {
color: blue;
}
/* Sélecteur d'ID */
#special {
color: red;
}<p class="highlight" id="special">Ce paragraphe aura un texte rouge.</p>Le paragraphe aura un texte rouge car le sélecteur d'ID a la plus haute spécificité.
Lors de la combinaison de sélecteurs, gardez vos sélections aussi simples et spécifiques que possible pour la lisibilité et la maintenabilité de vos feuilles de style. Évitez les combinaisons trop complexes ou longues sauf si nécessaire.
Conseil: Garder les sélecteurs simples et spécifiques
/* Évitez les sélecteurs complexes */
div.container p.highlight span.bold {
font-weight: bold;
}
/* Préférez des sélecteurs plus simples et plus spécifiques */
.highlight .bold {
font-weight: bold;
}Le deuxième sélecteur est plus simple, ce qui le rend plus facile à comprendre et à maintenir.