Subscribe to get the weekly post

Or

Follow me

6 sélecteurs CSS puissants qui vous aideront réellement à écrire du CSS propre

Publié 3 months ago 3 min de lecture

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.

#css

Posted by Ibrahima Ndaw

Full-stack developer and blogger
Follow me

Get the next in your inbox