Comprendre la Spécificité en CSS

Le tri par la spécificité - la spécificité par les nombres
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de comprendre le concept de spécificité en CSS, apprendre à calculer la spécificité des sélecteurs, et savoir appliquer ces connaissances pour gérer les conflits de styles dans une feuille de style CSS.

Apprenez à calculer la spécificité des sélecteurs en CSS afin de maîtriser quelle règle s'appliquera à vos éléments HTML.

La leçon explore en profondeur la spécificité des sélecteurs en CSS. La spécificité est un concept fondamental pour déterminer quelle règle CSS sera appliquée à un élément HTML lorsqu'il y a des déclarations conflictuelles. Cette spécificité est définie par le W3C et repose sur un système numérique utilisant trois nombres distincts.

Les différents types de sélecteurs disposent de poids spécifiques :

  • Un sélecteur universel (0 point).
  • Un sélecteur d'éléments HTML comme <body>, <h1>, <h2>, etc. (1 point).
  • Un sélecteur de classes, d'attributs ou de pseudo-classes (10 points).
  • Un identifiant (100 points).
  • Un style en ligne (1000 points).
  • Le mot-clé important (10000 points).

Des exemples concrets sont donnés pour montrer comment ces poids affectent les règles appliquées, notamment en utilisant des hiérarchies de sélecteurs et des identifiants. La leçon met l'accent sur la compréhension de l'ordre dans le document et la cascade des déclarations pour une meilleure gestion des styles dans les projets web.

Voir plus
Questions réponses
Quelle est la spécificité d'un sélecteur d'identifiant en CSS?
La spécificité d'un sélecteur d'identifiant en CSS est de 100 points.
Que se passe-t-il si deux sélecteurs ont la même spécificité mais des déclarations de styles conflictuelles?
Si deux sélecteurs ont la même spécificité, c'est la dernière déclaration dans le code qui sera appliquée, selon l'ordre des déclarations dans le document.
Pourquoi le mot-clé 'important' a-t-il une spécificité si élevée?
Le mot-clé 'important' a une spécificité élevée (10000 points) pour pouvoir surclasser toutes les autres règles, même celles définies avec des spécificités numériques élevées, et garantir l'application de cette règle de style.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 10 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !