Les sélecteurs CSS CreuSéS de fond en comble

Il convient également de comprendre l’ordre de priorités des styles.

Si vous donnez un fond vert à toute une div qui contient plusieurs paragraphes, et un fond rouge à l’un de ces paragraphes, ce dernier sera en effet rouge, car il a la priorité sur la div principale, mais les autres paragraphes seront verts. Explications :

Les balises enfants qui n’ont aucun style héritent des propriétés CSS des balises parents. En revanche, plus vous serez spécifique en ciblant un élément, plus le style de cet élément aura la priorité sur le style de ses parents.

• Le sélecteur étoile ( * ) a une priorité de 0.
• Une règle avec un sélecteur sur un type d’élément

  ou des pseudo-éléments ( :: ) a une priorité de 1.

• Une règle avec un sélecteur sur une classe ( . ) ou des pseudo-class ( : ) a une priorité de 10.
• Une règle avec un sélecteur sur un identifiant ( # ) a une priorité de 100.
• Une règle écrite dans l’attribut style d’une balise HTML a une priorité de 1000.
• Une règle avec la mention !important a une priorité de 10000.

Pour adopter les bonnes pratiques du web, il convient d’éviter au maximum d’utiliser la mention !important dans le CSS qui prend la priorité sur tout autre style donné à un parent. On peut vite se retrouver perdu si les mentions !important fleurissent sur la feuille de style.

Il est aussi très déconseillé d’écrire le style CSS directement dans le HTML, car là aussi notre code n’en sera que plus difficilement maintenable à l’avenir.

Et en règle générale, il sera plus confortable d’utiliser des class plus que des id, car lors de légers conflits de style, il sera facile de contourner une règle en utilisant un id de temps en temps pour devenir d’un seul coup plus précis.

Ce sont les navigateurs qui appliquent les règles CSS que nous leur dictons et ils le font dans l’ordre d’affichage. Ce qui signifie qu’en cas d’égalité dans les priorités, c’est la déclaration écrite en dernière qui l’emporte.

:nth-child

C’est une fonction qui permet d’appeler un élément enfant selon sa position dans la div.

//HTML
<section class="grid">
<article class="module">One</article>
<article class="module">Two</article>
<article class="module">Three</article>
<article class="module">Four</article>
<article class="module">Five</article>
</section>

Dans ce cas, nous pouvons cibler uniquement le 4ème article en écrivant .module:nth-child(4) { .

.module:nth-child(even) { ciblera toutes balises avec une class= »module » qui ont un rang pair, ici nous ciblerons donc le 2ème et 4ème article.

.module:nth-child(odd) { ciblera toutes balises avec une class= »module » qui ont un rang impair, ici nous ciblerons donc le 1er, le 3ème et le 5ème article.

sources