Les sélecteurs en CSS sont utilisés pour choisir des éléments et les styliser. Ils peuvent être très puissants en fonction de son utilisation. Dans cet article, je vais vous guider à travers 6 puissants sélecteurs CSS qui vous aideront vraiment à écrire du CSS propre pour votre prochain projet.

1. div > a

Ce sélecteur nous permettra de sélectionner tous les éléments a où l'élément parent est une balisediv.

<!-- Celui-ci sera selectionné -->
<div>
  <a></a>
</div>

<!-- Celui-ci ne sera pas selectionné -->
<p>
  <a></a>
</p>

2. div + a

Celui-ci sélectionnera toutes les balises a placées immédiatement après un élémentdiv. Si on a un élément entre les balises div eta, cet élément ne sera pas sélectionné.

<main>
  <!-- Celui-ci sera selectionné -->
  <div></div>
  <a></a>
  <!-- This one will be not selected -->
  <div></div>
  <p></p>
  <a></a>
</main>

3. div ~ a

Celui-ci sélectionnera chaque balise a précédée d'un élémentdiv et etant sur le même niveau. En d'autres termes, si la balise a n'est pas immédiatement précédée d'un élémentdiv, mais a quand même une balise div comme élément frère, cet élément sera sélectionné.

<main>
  <!-- Celui-ci sera selectionné -->
  <div></div>
  <a></a>
  <!-- Celui-ci sera selectionné -->
  <div></div>
  <p></p>
  <a></a>
  <section>
    <!-- Celui-ci sera selectionné -->
    <div></div>
    <p></p>
    <a></a>
  </section>

  <footer>
    <!-- This one will be not selected -->
    <p></p>
    <a></a>
  </footer>
</main>

4. [attribute^=value]

exemple: [class^="list-"] Ce sélecteur choisira chaque élément contenant un attribut class et dont sa valeur commence parlist-

<main>
  <!-- Celui-ci sera selectionné -->
  <div class="list-element"></div>
  <!-- Celui-ci sera selectionné -->
  <div class="list-container"></div>
  <!-- Celui-ci sera selectionné -->
  <div class="list-item"></div>
  <!-- This one will be not selected -->
  <div class="list__footer"></div>
</main>

5. [attribute$=value]

exemple: [src$=".png"] Celui-ci sélectionnera chaque attribut src et dont sa valeur se termine par.png.

<div>
  <!-- Celui-ci sera selectionné -->
  <img src="image1.png" />
  <!-- This one will be not selected -->
  <img src="image2.jpg" />
  <!-- Celui-ci sera selectionné -->
  <img src="image3.png" />
  <!-- This one will be not selected -->
  <img src="image4.svg" />
</div>

6. [attribute*=value]

exemple: [class*="-list"] Ce sélecteur choisira chaque élément dont l'attribut class contient-list. Peu importe si -list est au début, au milieu ou à la fin de la valeur de la classe. Le plus important est que la valeur doit contenir -list.

<main>
  <!-- Celui-ci sera selectionné -->
  <div class="main-list-container"></div>
  <!-- Celui-ci sera selectionné -->
  <div class="primary-list"></div>
  <!-- Celui-ci sera selectionné -->
  <div class="primary-list-item"></div>
  <!-- This one will be not selected -->
  <div class="list-footer"></div>
</main>

Conclusion

Parfois, il est vraiment difficile de trouver l'élément nécessaire à styliser, car notre fichier CSS peut être surchargé très rapidement. Et l'utilisation de ces types de sélecteurs peuvent être très utile selon le cas d'utilisation.