Chapitre 2 : Les sélecteurs CSS

Structure d’une règle CSS

Une règle CSS est composée de 3 éléments :

• le sélecteur : pour cibler un ou plusieurs éléments HTML
• la propriété : ce que tu veux modifier (couleur, taille, etc.)
• la valeur : le réglage souhaité pour cette propriété

Voici la syntaxe générale :

sélecteur {
  propriété: valeur;
}

Exemple :

p {
  color: red;
  font-size: 16px;
}

Ce code sélectionne tous les éléments <p> et leur applique une couleur rouge et une taille de police de 16 pixels.

À quoi servent les sélecteurs ?

Les sélecteurs CSS permettent de cibler les éléments HTML à styliser. On leur associe ensuite des règles de style.

Les types de sélecteurs les plus courants

• Par type (élément HTML) : p, h1, div
• Par classe : .ma-classe
• Par identifiant (ID) : #mon-id
• Par relation : descendant, enfant, frère, etc.

Exemples simples

Sélecteur par élément

p {
  color: blue;
}

Sélecteur par classe

.important {
  font-weight: bold;
  color: red;
}

HTML correspondant :

<p class="important">Attention !</p>

Sélecteur par ID

#en-tete {
  background-color: #eee;
}

<div id="en-tete">Titre ici</div>

Sélecteurs combinés et hiérarchiques

Sélecteur descendant (espace)

article p {
  color: gray;
}

Sélecteur enfant direct (>)

ul > li {
  list-style: square;
}

Sélecteurs multiples

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

Spécificité des sélecteurs

En cas de conflit entre deux règles CSS, c’est celle avec la plus grande spécificité qui s’applique :

• #id > .classe > élément
• La règle la plus précise l'emporte, sauf si une règle est déclarée avec !important.