poids des sélecteurs CSS

Journal CSS for Beginners
Les sélecteurs CSS totalisent un certain score pour définir leur priorité d’exécution, comprendre cette façon de compter les points vous évitera bien des soucis dans l’héritage des styles.

Dans l’ordre du plus prioritaire au moins important:

  • les sélecteurs inline ( par exemple

    )

  • les #id (

    )

  • les .classes (

    )

  • les <éléments> (

    )

Votre navigateur, pour déterminer quel sélecteur doit avoir raison fait un tableau selon cet ordre.

inline | id | class | element
0 | 0 | 0 | 0

Quand il rencontre un sélecteur il examine de quoi il s’agit. Par exemple si j’ai ce CSS:

#patate .douce.fraiche { color : red; }

.douce { color : blue;}

Le premier sélecteur comporte un ID et une classe. Il a donc ce nombre de points selon le tableau vu ci dessus: 0 | 1 | 2 | 0. C’est à dire 120 points.
Le deuxième sélecteur aura juste 10 points.
120 étant supérieur a 10, c’est le premier sélecteur qui aura la priorité pour repeindre.

Pour plusse de trucs et astuces sur le CSS, je vous conseille le site d’Alsacréations.com et openclassrooms.com.
Enjoyez.

Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.

  • Bitcoin : 1HnPR8SCv8zz2GammC9JjnyNwhuTUS1V2Y
  • Ethereum : 0x164827935544125dde38a935e3b14e66a35724f3
  • Monero : 46wL7iETFo5Vwiz7RRJtkMb2vLFd2k9qT49eyZHu5gL9fvdcS4ktEiHWbwaVe4vUMveKAzAiA4j8xgUi29TpKXpm43Nwzaq
  • Ğ1 : 46wL7iETFo5Vwiz7RRJtkMb2vLFd2k9qT49eyZHu5gL9fvdcS4ktEiHWbwaVe4vUMveKAzAiA4j8xgUi29TpKXpm43Nwzaq
Le plus simple nous pour nous faire connaître étant de partager cet article.
Suivez moi sur Mastodon @tykayn@mamot.fr.
Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.