Les sélecteurs

Les sélecteurs CSS sont comme des instructions que vous donnez à votre site web pour dire à quelles parties de votre page vous souhaitez appliquer un style. Voici quelques types de sélecteurs et leurs différences :

Élément tag HTML

Il s'agit du sélecteur le plus basique. Vous sélectionnez un élément HTML spécifique, comme <p> pour les paragraphes, <h1> pour les titres, etc. Tout ce que vous appliquez à ce sélecteur affectera tous les éléments correspondants sur votre page.

Exemple :

p {
   color: blue;
}

Classe .

Vous attribuez une classe spécifique à un ou plusieurs éléments HTML, puis utilisez cette classe comme sélecteur. Cela vous permet d'appliquer un style à un groupe particulier d'éléments.

Exemple :

<p class="important-text">Ce texte est important.</p>

.important-text {
   font-weight: bold;
}

Combinaison tag.classe

Ce sélécteur est une combinaison de deux types de sélecteurs CSS qui sont utilisés ensemble pour cibler spécifiquement un certain groupe d'éléments HTML. Une classe est généralement utiliser pour appliquer un même style à plusieurs éléments HTML, si on souhaite qu'une classe applique un style encore plus spécifique au tag de type div qui pourrait être n'importe quel tag HTML, on va lui spécifier qu'il ne doit prendre que les classes .container qui sont présent sur une balise div.

Exemple :

<div classe="container">
    div qui comprends la classe "container"
</div>

<section classe="container">
   section qui comprends aussi la classe "container"
   celle-ci ne sera pas influencer par le CSS ci-dessous puisqu'on est sur la balise section
</section>

div.container {
    background-color: gray;
}

Identifiant #

Vous attribuez un identifiant unique à un élément HTML, puis utilisez cet identifiant comme sélecteur. Cela garantit qu'un seul élément sur votre page a ce style particulier.

Exemple :

<div id="header">En-tête du site</div>

#header {
    background-color: gray;
}

Descendant, enfant espace

Vous pouvez sélectionner un élément qui est un enfant direct ou un descendant d'un autre élément. Par exemple, vous pouvez cibler tous les paragraphes (<p>) à l'intérieur d'une <div class="container"> particulière.

Exemple :

<div class="container">
    <p>
        Paragraphe contenu dans le div.container
    </p>
</div>

.container p {
   margin: 10px;
}

Attribut [attribut]

Vous pouvez sélectionner des éléments en fonction de leurs attributs. Par exemple, sélectionner tous les liens (<a>) avec un attribut href spécifique.

Exemple :

a[href="https://www.example.com"] {
   color: green;
}

Universel *

Le sélecteur * s'applique à tous les éléments sur la page. Il est utile lorsque vous souhaitez appliquer un style global.

Exemple :

* {
   margin: 0;
   padding: 0;
}

Groupe ,

Vous pouvez regrouper plusieurs sélecteurs pour leur appliquer le même style. Cela permet de réduire la duplication de code.

Exemple :

h1, h2, h3 {
   font-family: "Arial", sans-serif;
}

Pseudo-classe :etat

Les pseudo-classes permettent de sélectionner des éléments dans des états spécifiques, comme les liens non visités (:hover, :active) ou les cases à cocher (:checked).

Exemple :

a:hover {
   text-decoration: underline;
}

pseudo-élément :element

Les pseudo-éléments permettent de cibler des parties spécifiques d'un élément, comme le premier paragraphe (:first-of-type) ou la première lettre (:first-letter) d'un texte.

Exemple :

p:first-letter {
    font-size: 24px;
}

p:first-of-type {
    background: red;
}

Adjacent +

Vous pouvez sélectionner un élément qui est directement adjacent à un autre élément du même type. Par exemple, le premier paragraphe après un titre.

Exemple :

h2 + p {
    margin-top: 20px;
}

Enfant direct >

Sélectionnez uniquement les éléments qui sont des enfants directs d'un autre élément, en utilisant >.

Exemple :

ul > li {
    list-style-type: square;
}

Fratrie ~

Vous pouvez sélectionner tous les éléments frères/soeurs d'un type donné qui suivent un élément spécifique.

Exemple :

h2 ~ p {
    font-style: italic;
}

Dans cet exemple, tous les paragraphes (<p>) qui suivent un titre de niveau 2 (<h2>) auront leur style de police en italique.

N-ième element :nth-child()

Vous pouvez sélectionner un élément frère d'un type donné en fonction de sa position parmi les éléments frères.

Exemple :

ul li:nth-child(odd) {
    background-color: blue;
}

ul li:nth-child(even) {
    background-color: yellow;
}

ul li:nth-child(3) {
    background-color: green;
}

Dans cet exemple :

• tous les éléments <li> impaire odd auront un arrière-plan bleu.
• tous les éléments <li> paire even auront un arrière-plan jaune.
• uniquement le troisième <li> de la liste aura un arrièe-plan vert.

Premier / dernier :first / :last

Exemple :

p:first-child {
    color: red;
}
p:last-child {
    color: blue;
}

Ici:

• le premier paragraphe <p> héritera de la couleur rouge
• le dernier paragraphe <p> aura la couleur du texte en bleu