Les sélecteurs simples en CSS

• Sélecteurs de type
• Sélecteurs groupés
• Sélecteurs universels
• Sélecteurs descendants
• Sélecteurs d’identifiant
• Sélecteurs de classe
• Sélecteurs d’attribut

 *{background-color : yelloW;}

*{background-color : yellow;}
p{background-color : gray;}

1. Structure des sélecteurs descendants :

• Pour créer un sélecteur descendant, vous spécifiez l’élément parent suivi d’un espace, suivi de l’élément enfant que vous souhaitez cibler. Par exemple :

element-parent element-enfant {
  /* styles à appliquer à l'élément-enfant */
}

• element-parent : C’est l’élément HTML dont les descendants seront stylisés.
• element-enfant : C’est l’élément HTML à l’intérieur de element-parent que vous souhaitez cibler.

2. Exemple de sélecteur descendant :

• Supposons que vous ayez la structure HTML suivante :

<div class="conteneur">
  <p>Ceci est un paragraphe.</p>
  <ul>
   <li>Liste élément 1</li>
    <li>Liste élément 2</li>
  </ul>
</div>

• Vous pouvez utiliser un sélecteur descendant pour appliquer des styles spécifiques au paragraphe (<p>) à l’intérieur de la <div> avec la classe « conteneur » :

.conteneur p {
  color: blue;
  font-size: 16px;
}

• Dans cet exemple, les styles de texte (couleur et taille de police) sont appliqués uniquement aux éléments <p> qui se trouvent à l’intérieur de la classe .conteneur.

3. Avantages des sélecteurs descendants :

• Sélection précise : Les sélecteurs descendants permettent de cibler précisément des éléments spécifiques à l’intérieur d’autres éléments, ce qui vous donne un contrôle précis sur la mise en page et le style.
• Hiérarchie claire : Ils reflètent la structure hiérarchique du HTML, ce qui facilite la compréhension du code CSS, en particulier dans des documents HTML complexes.
• Réutilisation : Vous pouvez réutiliser les mêmes styles pour des éléments similaires situés à des endroits différents dans votre document HTML, tant qu’ils sont structurés de la même manière.

4. Remarques :

• Les sélecteurs descendants peuvent être imbriqués pour cibler des éléments descendants plus profonds. Par exemple, .conteneur ul li ciblera les éléments <li> qui se trouvent à l’intérieur d’une liste non ordonnée (<ul>) à l’intérieur de .conteneur.
• Vous pouvez également utiliser des sélecteurs de classe ou des sélecteurs d’ID en combinaison avec des sélecteurs descendants pour plus de spécificité.
• Gardez à l’esprit que l’utilisation excessive de sélecteurs descendants très spécifiques peut rendre votre code CSS moins flexible et plus difficile à maintenir. Il est souvent recommandé de suivre les principes de la séparation des préoccupations et d’utiliser des classes CSS pour ajouter des styles aux éléments.

5. Application :

• Imaginez que vous travaillez sur la création de styles CSS pour une page web. Vous avez la structure HTML suivante et des descriptions de styles à appliquer. Utilisez des sélecteurs descendants pour atteindre les éléments spécifiques et appliquer les styles requis :
• Structure HTML :

<div class="conteneur">
    <h1>Titre de la Page</h1>
    <p>Ceci est un paragraphe dans le conteneur.</p>
    <ul>
      <li>Faire les courses</li>
      <li>Nettoyer la maison</li>
    </ul>
    <table class="tableau">
      <tr>
        <th>Nom</th>
        <th>Âge</th>
      </tr>
      <tr>
        <td>John</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>30</td>
      </tr>
    </table>
    <div class="boutons">
      <button class="principal">Bouton Principal</button>
      <button class="secondaire">Bouton Secondaire</button>
    </div>
  </div>

• Styles à appliquer :
• Créez un fichier CSS nommé « style.css« .
• Dans ce fichier « style.css », ajoutez les règles CSS appropriées pour les styles suivants :
• 1- Donnez à tous les paragraphes (<p>) à l’intérieur de la classe .conteneur une couleur de texte bleue (color: blue;).
• 2- Donnez à tous les éléments de liste (<li>) à l’intérieur de la <ul> dans .conteneur une couleur de texte verte (color: green;).
• 3- Donnez une couleur de fond grise (background-color: gray;) à toutes les cellules (<td>) à l’intérieur de la classe .tableau.
• 4- Donnez à tous les boutons à l’intérieur de la classe .boutons une couleur de fond bleue (background-color: blue;) et une couleur de texte blanche (color: white;).
• 5- Rédigez les règles CSS appropriées pour chaque style à appliquer en utilisant des sélecteurs descendants.
• 6- Donnez à tous les titres de niveau 1 (<h1>) à l’intérieur de la classe .conteneur une couleur de texte rouge (color: red;).
• 7- Donnez une marge de 20 pixels à gauche (margin-left: 20px;) à tous les éléments de liste (<li>) à l’intérieur de la (<ul>) dans .conteneur.
• 8- Donnez à toutes les cellules de tableau (<td>) à l’intérieur de la classe .tableau une bordure de 1 pixel solide noire (border: 1px solid black;).
• 9- Donnez à tous les boutons de classe .principal à l’intérieur de .boutons une largeur de 150 pixels (width: 150px;).
• 10- Donnez à tous les boutons de classe .secondaire à l’intérieur de .boutons une couleur de fond jaune (background-color: yellow;).
• 11- Donnez à tous les paragraphes (<p>) à l’intérieur de .conteneur une marge de 10 pixels en haut et en bas (margin-top: 10px; et margin-bottom: 10px;).
• Intégrez le fichier CSS « style.css » que vous venez de créer à votre page HTML pour appliquer les styles aux éléments HTML.
Solution

Créez un fichier CSS nommé « style.css » et ajoutez-y les règles CSS appropriées comme indiqué dans les questions précédentes.

Contenu du fichier « style.css » :

/* Styles pour les paragraphes à l'intérieur de la classe .conteneur */
.conteneur p {
  color: blue;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Styles pour les éléments de liste à l'intérieur de .conteneur */
.conteneur ul li {
  color: green;
  margin-left: 20px;
}

/* Styles pour les cellules de tableau à l'intérieur de .tableau */
.tableau td {
  background-color: gray;
  border: 1px solid black;
}

/* Styles pour les boutons à l'intérieur de .boutons */
.boutons button {
  width: 150px;
}

/* Styles pour les boutons de classe .principal à l'intérieur de .boutons */
.boutons .principal {
  background-color: blue;
  color: white;
}

/* Styles pour les boutons de classe .secondaire à l'intérieur de .boutons */
.boutons .secondaire {
  background-color: yellow;
}

/* Styles pour les titres de niveau 1 à l'intérieur de .conteneur */
.conteneur h1 {
  color: red;
}

Intégrez le fichier CSS « style.css » à votre page HTML en utilisant la balise dans la section du document HTML.

Exemple de lien CSS dans le fichier HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Votre Page Web</title>
</head>
<body>
    <!-- Votre contenu HTML ici -->
</body>
</html>

/* L'élément avec l'identifiant id="mon-id" */
#mon-id {
  border: red 2px solid;
}

Exemple d’utilisation d’un sélecteur d’identifiant :

<p id="mon-paragraphe">Ceci est un paragraphe avec un identifiant</p>

#mon-paragraphe {
  color: blue;
  font-size: 16px;
}

• Imaginez que vous travaillez sur la création de styles CSS pour une page web. Vous avez la structure HTML suivante et des descriptions de styles à appliquer en utilisant des sélecteurs d’identifiant (ID).

<p id="paragraphe-1">Ceci est le premier paragraphe.</p>
<p id="paragraphe-2">Ceci est le deuxième paragraphe.</p>
<p id="paragraphe-3">Ceci est le troisième paragraphe.</p>

• 1- Donnez à l’élément avec l’identifiant « paragraphe-1 » une couleur de texte bleue (color: blue;).
• 2- Donnez à l’élément avec l’identifiant « paragraphe-2 » une couleur de texte verte (color: green;).
• 3- Donnez à l’élément avec l’identifiant « paragraphe-3 » une couleur de texte rouge (color: red;).
• 4- Donnez à tous les paragraphes une taille de police de 18 pixels (font-size: 18px;).
• 5- Donnez à l’élément avec l’identifiant « paragraphe-1 » une marge de 10 pixels en haut (margin-top: 10px;).
• 6- Donnez à l’élément avec l’identifiant « paragraphe-2 » une marge de 10 pixels en bas (margin-bottom: 10px;).
Solution

Créez un fichier CSS nommé « style.css » et ajoutez-y les règles CSS appropriées comme indiqué dans les questions précédentes.

Contenu du fichier « style.css » :

/* Styles pour l'élément avec l'identifiant "paragraphe-1" */
#paragraphe-1 {
  color: blue;
  font-size: 18px;
  margin-top: 10px;
}

/* Styles pour l'élément avec l'identifiant "paragraphe-2" */
#paragraphe-2 {
  color: green;
  font-size: 18px;
  margin-bottom: 10px;
}

/* Styles pour l'élément avec l'identifiant "paragraphe-3" */
#paragraphe-3 {
  color: red;
  font-size: 18px;
}

• Intégrez le fichier CSS « style.css » à votre page HTML en utilisant la balise dans la section du document HTML.
• Exemple de lien CSS dans le fichier HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Votre Page Web</title>
</head>
<body>
    <!-- Structure HTML avec les paragraphes et les identifiants -->
    <p id="paragraphe-1">Ceci est le premier paragraphe.</p>
    <p id="paragraphe-2">Ceci est le deuxième paragraphe.</p>
    <p id="paragraphe-3">Ceci est le troisième paragraphe.</p>
</body>
</html>

1. Classe qui s’applique à un seul élément HTML

• Par exemple, si nous souhaitons que certains paragraphes (<p>) soient affichés en rouge (disons, pour mettre en évidence des paragraphes importants), et que d’autres paragraphes aient un alignement centré, nous pouvons définir deux classes pour chacun de types de paragraphe :

p.introduction{text-align:center}
p.important{color:red}

• Dans le document HTML, l’attribut class permet de choisir la classe qui sera utilisée :

<p class="introduction">Un paragraphe d’introduction</p>
<p class="important">Un paragraphe important</p>

2. Classe qui s’applique à tous les éléments HTML

• Pour définir une classe qui s’applique à tous les éléments HTML, et pas uniquement à un seul élément HTML (comme <p> dans l’exemple ci-dessus), on utilise la syntaxe suivante : l’élément HTML n’est pas écrit ; on commence directement par un point, suivi du nom de la classe.

Exemple :
.important{color:red}

• Ainsi, la classe important pourra être utilisée pour tous les éléments HTML :

alt;h1 class="important">Un titre important </h1>
<p class="important">Un paragraphe important </p>

Lire la suite