Les sélecteurs en CSS sont des méthodes permettant de sélectionner et de styliser des éléments HTML dans un document. Ils sont utilisés pour appliquer des styles à des éléments spécifiques ou à un groupe d’éléments sur une page web.
Il existe plusieurs types de sélecteurs en CSS, chacun ayant ses propres caractéristiques et utilisations.
Voici quelques exemples de sélecteurs couramment utilisés en CSS :
1 - Le sélecteur d'élément
Le sélecteur d’élément en CSS permet de sélectionner tous les éléments d’un type donné dans un document HTML. Par exemple, si vous souhaitez appliquer un style à tous les éléments de paragraphe dans une page, vous pouvez utiliser le sélecteur « p » comme suit :
p {
/* les styles à appliquer aux éléments de paragraphe */
font-family: Arial;
font-size: 14px;
color: black;
}
Cela appliquera les styles spécifiés à tous les éléments de paragraphe dans la page. Si vous souhaitez sélectionner tous les éléments de titre de niveau 1, vous pouvez utiliser le sélecteur « h1 », et ainsi de suite pour tous les autres types d’éléments HTML.
Il est également possible d’utiliser des sélecteurs d’élément en combinaison avec d’autres sélecteurs, comme les sélecteurs de classe et d’identifiant, pour cibler des éléments plus précisément. Par exemple, si vous souhaitez sélectionner tous les éléments de paragraphe qui ont la classe « warning », vous pouvez utiliser le sélecteur « p.warning ».
2 - Le sélecteur de classe
Le sélecteur de classe en CSS permet de sélectionner tous les éléments qui possèdent une classe donnée. Pour utiliser un sélecteur de classe, vous devez ajouter un point (.) devant le nom de la classe dans votre sélecteur. Par exemple, le sélecteur « .warning » sélectionnera tous les éléments qui ont la classe « warning ».
Voici un exemple de code HTML avec des éléments qui ont la classe « warning » :
<div class="warning">Attention !</div>
<p class="warning">Ceci est un avertissement important.</p>
Et voici comment vous pouvez utiliser un sélecteur de classe en CSS pour styliser ces éléments :
.warning {
/* les styles à appliquer aux éléments avec la classe "warning" */
background-color: yellow;
font-weight: bold;
}
Cela appliquera les styles spécifiés à tous les éléments qui ont la classe « warning » dans le document.
Il est également possible de combiner un sélecteur de classe avec un sélecteur d’élément pour cibler des éléments plus précisément. Par exemple, le sélecteur « p.warning » sélectionnera tous les éléments de paragraphe qui ont la classe « warning ».
Notez que vous pouvez attribuer plusieurs classes à un même élément en les séparant par un espace dans l’attribut « class » de l’élément. Par exemple :
<p class="warning important">Ceci est un avertissement important.</p>
Vous pouvez alors utiliser des sélecteurs de classe pour styliser cet élément en fonction de chaque classe individuellement. Par exemple :
.warning {
/* les styles à appliquer aux éléments avec la classe "warning" */
background-color: yellow;
}
.important {
/* les styles à appliquer aux éléments avec la classe "important" */
font-weight: bold;
color: red;
}
Cela appliquera à l’élément de paragraphe un arrière-plan jaune (car il a la classe « warning ») et un texte en gras et en rouge (car il a la classe « important »).
3 - Le sélecteur d'identifiant
Le sélecteur d’identifiant en CSS permet de sélectionner un élément unique qui possède un identifiant donné. Pour utiliser un sélecteur d’identifiant, vous devez ajouter un dièse (#) devant l’identifiant dans votre sélecteur. Par exemple, le sélecteur « #header » sélectionnera l’élément qui a l’identifiant « header ».
Voici un exemple de code HTML avec un élément qui a l’identifiant « header » :
<div id="header">Bienvenue sur mon site !</div>
Et voici comment vous pouvez utiliser un sélecteur d’identifiant en CSS pour styliser cet élément :
#header {
/* les styles à appliquer à l'élément avec l'identifiant "header" */
background-color: blue;
color: white;
font-size: 24px;
}
Cela appliquera les styles spécifiés à l’élément div qui a l’identifiant « header » dans le document.
Notez que chaque identifiant doit être unique dans un document, ce qui signifie qu’il ne peut être utilisé qu’une seule fois. Si vous avez besoin de styliser plusieurs éléments de manière similaire, vous devriez plutôt utiliser un sélecteur de classe.
Il est également possible de combiner un sélecteur d’identifiant avec un sélecteur d’élément pour cibler des éléments plus précisément. Par exemple, le sélecteur « div#header » sélectionnera l’élément div qui a l’identifiant « header ». Cela peut être utile si vous avez plusieurs éléments de différents types qui ont le même identifiant et que vous souhaitez styliser uniquement l’élément de type div parmi eux.
4 - Le sélecteur de descendant
Le sélecteur de descendant en CSS permet de sélectionner les éléments qui sont descendants d’un autre élément. Pour utiliser un sélecteur de descendant, vous devez séparer les éléments par un espace dans votre sélecteur. Par exemple, le sélecteur « div p » sélectionnera tous les éléments de paragraphe qui sont à l’intérieur d’un élément div.
Voici un exemple de code HTML avec un élément div qui contient plusieurs éléments de paragraphe :
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</div>
Et voici comment vous pouvez utiliser un sélecteur de descendant en CSS pour styliser ces éléments :
div p {
/* les styles à appliquer aux éléments de paragraphe qui sont à l'intérieur d'un élément div */
font-family: Arial;
font-size: 14px;
color: black;
}
Cela appliquera les styles spécifiés à tous les éléments de paragraphe qui sont à l’intérieur d’un élément div dans le document.
Vous pouvez également utiliser plusieurs niveaux de descendants en ajoutant d’autres éléments séparés par des espaces. Par exemple, le sélecteur « div ol li » sélectionnera tous les éléments de liste qui sont à l’intérieur d’un élément de liste ordonnée qui est à son tour à l’intérieur d’un élément div.
Voici un exemple de code HTML avec un élément div qui contient une liste ordonnée avec plusieurs éléments de liste :
<div>
<ol>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ol>
</div>
Et voici comment vous pouvez utiliser un sélecteur de descendant avec plusieurs niveaux pour styliser ces éléments :
div ol li {
/* les styles à appliquer aux éléments de liste qui sont à l'intérieur d'un élément de liste ordonnée qui est à son tour à l'intérieur d'un élément div */
font-family: Arial;
font-size: 14px
5 - Le sélecteur de frère
Le sélecteur de frère en CSS permet de sélectionner les éléments qui sont frères d’un autre élément. Pour utiliser un sélecteur de frère, vous devez utiliser un signe plus (+) entre les éléments dans votre sélecteur. Par exemple, le sélecteur « h1 + p » sélectionnera tous les éléments de paragraphe qui sont immédiatement suivis par un élément de titre de niveau 1.
Voici un exemple de code HTML avec des éléments de titre et de paragraphe qui sont frères :
<h1>Titre</h1>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
Et voici comment vous pouvez utiliser un sélecteur de frère en CSS pour styliser ces éléments :
h1 + p {
/* les styles à appliquer aux éléments de paragraphe qui sont immédiatement suivis par un élément de titre de niveau 1 */
font-family: Arial;
font-size: 14px;
color: black;
}
Cela appliquera les styles spécifiés aux éléments de paragraphe qui sont immédiatement suivis par un élément de titre de niveau 1 dans le document.
Il est également possible d’utiliser le sélecteur de frère général « ~ » pour sélectionner tous les éléments frères qui suivent un autre élément, peu importe la distance qui les sépare. Par exemple, le sélecteur « h1 ~ p » sélectionnera tous les éléments de paragraphe qui suivent un élément de titre de niveau 1, quelle que soit la distance qui les sépare.
Le sélecteur de frère est souvent utilisé avec les sélecteurs de type, de classe et d’identifiant pour cibler des éléments plus précisément. Par exemple, le sélecteur « #header + .warning » sélectionnera tous les éléments qui ont la classe « warning » et qui sont immédiatement suivis par un élément qui a l’identifiant « header ».
Il est également possible de combiner plusieurs sélecteurs pour cibler des éléments plus précisément. Par exemple, le sélecteur « div.warning p » sélectionnera tous les éléments de paragraphe à l’intérieur d’un élément div ayant la classe « warning ».
En utilisant les sélecteurs en CSS, vous pouvez personnaliser l’apparence de votre site web de manière précise et contrôlée. Ils sont essentiels pour tout développeur de sites web et il est important de les maîtriser pour créer des pages web professionnelles et bien conçues.
