Les sélecteurs combinés

Jusqu'ici on a vu comment sélectionner un ou plusieurs éléments (par #id, .classe, ou tag) afin de modifier leurs propriétés CSS. Et techniquement on pourrait s'en satisfaire, mais en faisant ça on se met à coller des classes et des ids partout et à devoir chercher des noms de classes alambiqués pour essayer de bien communiquer ce qui va et ne va pas ensemble. Donc voyons voir comment faire des selecteurs plus precis sans avoir à balancer des classes partout.

,

On va commencer simple avec la virgule , qui nous permet de sélectionner plusieurs choses.

En admettant que l'on veuille retirer les puces dans nos <ul> et les nombres dans nos <ol> on peut écrire le CSS suivant

ul {
  list-style: none;
}

ol {
  list-style: none;
}

Mais avec la virgule on peut juste écrire ceci

ul, ol {
  list-style: none;
}

Le sélecteurs ul,ol signifiant "les <ul> et les <ol>"

Eh oui, beaucoup de gens pensent intuitivement que pour viser plusieurs éléments il faut juste séparer les différents sélecteurs par un espace . Mais non, l'espace combine deux sélecteurs pour viser "les enfants de...".

article p {
}

Ce sélecteur combiné visera "les <p> qui sont enfants d' <article>"

donc...

<article>
  <p>ce p est visé parce qu'il est dans un article</p>
  <div>
    <p>celui la aussi, même si ce n'est pas un enfant direct</p>
  </div>
</article>
<p>par contre celui là non</p>

note : pas seulement les tags

Notez que pour tous ces opérateurs de combinaison, j'ai utilisé uniquement des tags pour les exemples, mais j'aurais très bien pu prendre des classes ou des identifiants.

ex: #presentation p étant "tous les <p> de l'élément ayant l'id "presentation""

>

Donc si on considère le sélecteur ci-dessous, qui est presque le même

article > p {
}

alors...

<article>
  <p>ce p est visé parce qu'il est un enfant direct d'un article</p>
  <div>
    <p>par contre celui ci non, il est enfant, mais pas direct</p>
  </div>
</article>
<p>et celui là non plus</p>

Tout ça pour quoi?

Il existe d'autres opérateurs de combinaisons mais on va en rester là parce que mon objectif n'est pas de vous pousser à faire le CSS le plus complexe possible, le but est que vous puissiez appliquer du style à un élément sans avoir besoin de tartiner votre HTML de classes et d'id dans tous les sens.

Prenez cet html par exemple

<article>
  <h2>Titre</h2>
  <p>ma description</p>
  <a><button>Visiter</button></a>
</article>

avant, pour sélectionner vos éléments vous auriez pu être tentés d'écrire ceci

<article>
  <h2 class="article-title">Titre</h2>
  <p class="article-description">ma description</p>
  <a><button class="article-button">Visiter</button></a>
</article>

pour aller avec ce CSS

article {
}

.article-title {
}

.article-description {
}

.article-button {
}

Mais maintenant on peut arriver au même résultat sans rien ajouter à l'HTML. Ni classe, ni identifiant, avec le CSS ci-dessous

article {
}

article h2 {
}

article p {
}

article button {
}

Ça communique tout aussi bien ce que ça fait sans pour autant rendre votre HTML plus difficile à fouiller.