CSS - Les combinateurs

Lucas D. -

Types de combinateurs CSS

Combinateur descendant

Le combinateur descendant est représenté par un espace entre deux sélecteurs. Il sélectionne tous les éléments qui sont descendants du premier sélecteur.

La syntaxe du combinateur descendant est :

Conseil: Syntaxe du combinateur descendant

selecteur1 selecteur2 {
  /* Propriétés CSS */
}

Pour sélectionner tous les éléments <p> qui sont à l'intérieur d'un élément <div>, vous utiliseriez :

Conseil: Exemple de combinateur descendant

div p {
  color: red;
}

Cela appliquera le style color: red; à tous les éléments <p> qui sont à l'intérieur d'un <div>, peu importe leur niveau d'imbrication.

Combinateur enfant

Le combinateur enfant est représenté par le symbole > entre deux sélecteurs. Il sélectionne tous les éléments qui sont des enfants directs du premier sélecteur.

La syntaxe du combinateur enfant est :

Conseil: Syntaxe du combinateur enfant

selecteur1 > selecteur2 {
  /* Propriétés CSS */
}

Pour sélectionner tous les éléments <p> qui sont des enfants directs d'un élément <div>, vous utiliseriez :

Conseil: Exemple de combinateur enfant

div > p {
  color: blue;
}

Cela appliquera le style color: blue; uniquement aux éléments <p> qui sont des enfants immédiats d'un <div>. Cela n'affectera pas les éléments <p> imbriqués plus profondément dans d'autres éléments à l'intérieur du <div>.

Combinateur de frère adjacent

Le combinateur de frère adjacent est représenté par le symbole + entre deux sélecteurs. Il sélectionne le deuxième élément seulement s'il suit directement le premier élément et que les deux ont le même parent.

La syntaxe de ce combinateur est :

Conseil: Syntaxe du combinateur de frère adjacent

selecteur1 + selecteur2 {
  /* Propriétés CSS */
}

Pour sélectionner tous les éléments <p> qui suivent directement un <h1>, vous utiliseriez :

Conseil: Exemple de combinateur de frère adjacent

h1 + p {
  font-weight: bold;
}

Cela appliquera le style font-weight: bold; à tout élément <p> juste après un <h1>, mais pas aux autres <p> de la page.

Combinateur général de frères

Le combinateur général de frères utilise le symbole ~ entre deux sélecteurs. Il sélectionne chaque frère après le premier, même s'ils ne le suivent pas immédiatement.

La syntaxe ressemble à ceci :

Conseil: Syntaxe du combinateur général de frères

selecteur1 ~ selecteur2 {
  /* Propriétés CSS */
}

Pour sélectionner chaque frère <p> après un <h1> :

Conseil: Exemple de combinateur général de frères

h1 ~ p {
  text-decoration: underline;
}

Cela applique text-decoration: underline; à chaque frère <p> suivant un <h1>, quelle que soit leur position parmi les frères.

Combinaison de plusieurs combinateurs

Les combinateurs CSS peuvent être utilisés ensemble pour créer des sélecteurs plus spécifiques. En combinant différents types de combinateurs, vous pouvez cibler des éléments en fonction de leurs relations et de leur hiérarchie dans la structure HTML.

Lors de l'utilisation de plusieurs combinateurs, tenez compte de l'ordre dans lequel ils sont appliqués. Les sélecteurs sont lus de droite à gauche, et chaque combinateur ajoute une nouvelle condition à la sélection.

Conseil: Combinaison des combinateurs de descendance et d'enfant

div.container > p span {
  color: green;
}

Dans ce cas, le sélecteur cible les éléments <span> qui sont descendants des éléments <p>, eux-mêmes enfants directs d'un <div> avec la classe "container".

Vous pouvez également combiner les combinateurs de frères adjacents et de frères généraux :

Conseil: Combinaison des combinateurs de frères adjacents et généraux

h2 + p ~ ul {
  background-color: yellow;
}

Ce sélecteur cible les éléments <ul> qui sont des frères généraux des éléments <p>, eux-mêmes frères adjacents des éléments <h2>.

Lorsque vous combinez plusieurs combinateurs, gardez les sélecteurs lisibles et faciles à maintenir. Évitez de créer des sélecteurs trop complexes qui sont difficiles à comprendre et à gérer.

Les bonnes pratiques pour combiner les combinateurs incluent :

  • Utilisez les combinateurs avec parcimonie pour garder votre CSS propre.
  • Combinez-les dans un ordre logique reflétant la hiérarchie souhaitée.
  • Utilisez des noms de classes et des ID clairs pour la lisibilité.
  • Testez soigneusement vos sélecteurs combinés.

Conseil: Exemple pratique de combinaison de combinateurs

<div class="post">
  <h2>Titre de l'article de blog</h2>
  <p>Publié le <span class="date">25 mai 2023</span></p>
  <p>Le contenu de l'article de blog va ici...</p>
  <ul class="tags">
    <li>Tag 1</li>
    <li>Tag 2</li>
    <li>Tag 3</li>
  </ul>
</div>
.post > h2 + p span.date {
  color: gray;
}

.post > p + ul.tags {
  margin-top: 10px;
}

Dans cet exemple, le premier sélecteur cible l'élément <span> avec la classe "date" à l'intérieur d'un élément <p> suivant directement un <h2> dans un élément avec la classe "post". Le deuxième sélecteur cible l'élément <ul> avec la classe "tags" qui vient après un élément <p> dans le même conteneur "post".

Applications pratiques

Les combinateurs CSS ont de nombreuses utilisations pratiques dans la conception web. Ils permettent de styler des éléments en fonction de leurs relations et de créer des sélecteurs plus spécifiques. Voici quelques exemples d'utilisation des combinateurs :

Styliser les menus de navigation

Conseil: Styling navigation menus

nav > ul > li {
  display: inline-block;
}

nav > ul > li > a {
  text-decoration: none;
  color: #333;
}

nav > ul > li > a:hover {
  color: #ff0000;
}

Styliser les éléments de formulaire

Conseil: Styling form elements

form label {
  display: block;
  margin-bottom: 5px;
}

form input[type="text"],
form input[type="email"] {
  width: 100%;
  padding: 10px;
}

form input[type="submit"] {
  background-color: #007bff;
  color: #fff;
}

form input[type="submit"]:hover {
  background-color: #0056b3;
}

Styliser les tableaux

Conseil: Styling tables

table thead th {
  background-color: #f0f0f0;
}

table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tbody td {
    padding :8px ;
}

table tfoot td{
    font-style :italic ;
}

Lors de l'utilisation des combinateurs dans vos projets de conception web, gardez ces conseils à l'esprit :

  1. Utilisez les combinateurs pour créer des sélecteurs spécifiques, réduisant ainsi le besoin de classes ou d'ID supplémentaires.
  2. Combinez-les logiquement pour sélectionner des éléments en fonction de leurs relations.
  3. Gardez vos sélecteurs lisibles en évitant les combinaisons trop complexes.
  4. Testez soigneusement vos sélecteurs pour vous assurer qu'ils appliquent correctement les styles.
  5. Utilisez-les avec d'autres sélecteurs CSS comme les classes et les ID pour un code CSS modulaire.