05 - Les sélecteurs

Il existe plusieurs types de sélecteurs CSS qui permettent de sélectionner des éléments HTML pour leur appliquer des styles. Les types les plus courants sont les suivants:

Sélecteurs d'éléments: ces sélecteurs sélectionnent tous les éléments d'un type donné sur une page. Par exemple, le sélecteur p sélectionnerait tous les éléments de paragraphe (<p>) sur une page.
Sélecteurs de classes: ces sélecteurs sélectionnent tous les éléments qui ont une classe spécifique. Les classes sont définies en utilisant l'attribut "class" dans une balise HTML, et sont précédées d'un point (.) dans le sélecteur CSS. Par exemple, le sélecteur .my-class sélectionnerait tous les éléments qui ont une classe "my-class".
Sélecteurs d'ID: ces sélecteurs sélectionnent un élément unique sur une page qui a un ID spécifique. Les IDs sont définis en utilisant l'attribut "id" dans une balise HTML, et sont précédés d'un dièse (#) dans le sélecteur CSS. Par exemple, le sélecteur #my-id sélectionnerait l'élément unique qui a un ID "my-id".
D'autres sélecteurs que nous verons par la suite

Par élement

Le selecteur par élément et celui que nous venons d'utiliser, le principe est donc de cibler chaque balise par son nom. Exemples :

h1 {
    color: red;
}
p {
    color: blue;
}

a {
    color: green;
}

Dans cet exemple, tous les titres seront rouge, les paragraphes seront bleu et les liens seront verts.

Par classe

Très rapidement, il sera nécessaire d'affiner les styles et la méthode "inline" montrera ses inconvénients lors de structures plus longues.

Ainsi, ce cas :

<head>
	<style>
		p{
			color:green;
		}
	</style>
</head>
<body>
	<h1>Mon titre principal</h1>
	<p>Paragraphe normal</p>
	<p>Paragraphe normal</p>
	<p style="color:blue;font-size:30px;">Paragraphe grand et bleu</p>
	<p style="color:blue;font-size:30px;">Paragraphe grand et bleu</p>
	<p style="color:blue;font-size:30px;">Paragraphe grand et bleu</p>
	<p style="color:red;font-size:12px;">Paragraphe petit et rouge</p>
	<p style="color:red;font-size:12px;">Paragraphe petit et rouge</p>
	<p style="color:red;font-size:12px;">Paragraphe petit et rouge</p>
</body>

Deviendra :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: green;
      }
      .blue-larger {
        color: blue;
        font-size: 30px;
      }
      .red-smaller {
        color: red;
        font-size: 12px;
      }

			.maClasse{
				color:orange;
			}
    </style>
  </head>
  <body>
    <h1 class="blue-larger">Mon titre principal</h1>
    <p>Paragraphe normal</p>
    <p>Paragraphe normal</p>
    <p class="blue-larger">Paragraphe grand et bleu</p>
    <p class="blue-larger">Paragraphe grand et bleu</p>
    <p class="blue-larger">Paragraphe grand et bleu</p>
    <p class="red-smaller">Paragraphe petit et rouge</p>
    <p class="red-smaller">Paragraphe petit et rouge</p>
    <p class="red-smaller">Paragraphe petit et rouge</p>

		<h2 class="maClasse">Mon titre secondaire</h2>

  </body>
</html>

On obtient donc quelque chose de bien plus lisible.

Vous noterez un point crucial lors de la syntaxe. Dans le code CSS, les classes sont précédés d'un point. Un sélecteur de type élément pourra être inséré sans préfixe. Mais un sélecteur de type classe aura comme préfixe un "."

L'avantage d'un l'utilisation des classes est qu'elles peuvent être multipliées

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: green;
      }
      .blue {
        color: blue;
      }
      .red {
        color: red;
      }
      .larger {
        font-size: 30px;
      }
      .smaller {
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <h1 class="smaller">Mon titre principal</h1>
    <p>Paragraphe normal</p>
    <p>Paragraphe normal</p>
    <p class="blue larger">Paragraphe grand et bleu</p>
    <p class="blue smaller">Paragraphe petit et bleu</p>
    <p class="blue larger">Paragraphe grand et bleu</p>
    <p class="red smaller">Paragraphe petit et rouge</p>
    <p class="red larger">Paragraphe grand et rouge</p>
    <p class="red smaller">Paragraphe petit et rouge</p>
  </body>
</html>

Vous pouvez ajouter autant de classes que nécessaires (attention à éviter la surchage pour garantir tout de même une lisibilité correcte. Chaque classe doit être séparée par un espace, et donc, un nom de classe ne pourra pas contenir une espace. Ainsi : Est correct :