Sélecteurs CSS : identifier les éléments HTML auxquels appliquer des styles

Sélecteurs CSS : Identifier les éléments HTML auxquels appliquer des styles

Les sélecteurs CSS sont des motifs qui permettent de cibler et de sélectionner des éléments HTML spécifiques afin de leur appliquer des styles de présentation. Comprendre les différents types de sélecteurs CSS est essentiel pour contrôler l'apparence de votre site Web.

1. Sélecteurs de type :

Les sélecteurs de type ciblent tous les éléments d'un certain type sur une page. Par exemple, le sélecteur p cible tous les paragraphes <p> dans le document HTML.

Exemple :

p { 
  color: blue; 
}

2. Sélecteurs de classe :

Les sélecteurs de classe ciblent les éléments qui ont une classe spécifique attribuée dans le code HTML. Vous pouvez réutiliser la même classe sur plusieurs éléments.

Exemple :

<p class="important">Ce paragraphe est important.</p>

.important { 
  font-weight: bold; 
}

3. Sélecteurs d'ID :

Les sélecteurs d'ID ciblent un élément HTML spécifique avec un attribut ID unique. Chaque ID doit être unique dans le document.

Exemple :

<div id="header">Contenu de l'en-tête</div>

#header { 
  background-color: gray; 
}

4. Sélecteurs de descendant :

Les sélecteurs de descendant ciblent des éléments HTML spécifiques qui sont des descendants directs ou indirects d'autres éléments.

Exemple :

<ul id="menu">
  <li>
    <a href="#">Accueil</a>
  </li>
</ul>

#menu li { 
  list-style-type: none; 
}

5. Sélecteurs d'attribut :

Les sélecteurs d'attribut ciblent des éléments HTML en fonction de leurs attributs ou de leurs valeurs d'attribut spécifiques.

Exemple :

<a href="https://www.example.com">Lien vers Example</a>

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

En utilisant ces sélecteurs CSS, vous pouvez cibler et styliser précisément les éléments HTML de votre page Web. En combinant différents types de sélecteurs, vous avez un contrôle total sur l'apparence de votre site.