Qu’est-ce que la spécificité en CSS ?
En CSS, la spécificité est essentiellement une mesure de la pertinence basée sur le type et l’ordre des sélecteurs CSS. Dans les cas où un élément HTML ou un groupe d’éléments est visé par plusieurs sélecteurs CSS, les règles de spécificité permettent aux navigateurs de déterminer quelles déclarations CSS sont les plus pertinentes pour l’élément HTML et doivent être appliquées.
Avant d’examiner les différentes règles de spécificité CSS, définissons clairement les niveaux de spécificité de chaque type de sélecteur CSS. Vous trouverez ci-dessous ce que l’on appelle la « hiérarchie de spécificité ». Elle commence par les types de sélecteurs dont la spécificité est la plus élevée, jusqu’au plus bas.
Sélecteurs d’identification : Les sélecteurs d’ID sont les plus spécifiques. Ils sélectionnent un élément en fonction de son attribut ID et ont la syntaxe #idname.
Sélecteurs de classe, sélecteurs d’attribut et sélecteurs de pseudo-classe : a) Les sélecteurs de classe sélectionnent tous les éléments d’une classe CSS et ont pour syntaxe .class name. b) Les sélecteurs d’attribut sélectionnent tous les éléments qui ont un attribut donné et ont pour syntaxe [attr]. c) Les sélecteurs de pseudo-classe sélectionnent les éléments uniquement lorsqu’ils sont dans un état spécial, comme visité ou survolé, et ont pour syntaxe selector:pseudo-class. d) Ces trois types de sélecteurs ont la même spécificité.
Sélecteurs de type : Ils sélectionnent tous les éléments HTML qui portent un nom de nœud donné et ont la syntaxe element.
Sélecteurs universels : Le sélecteur universel (*) n’a aucun effet sur la spécificité.
Règles de spécificité CSS
Il existe un certain nombre de règles de spécificité CSS avec lesquelles vous devez vous familiariser avant de commencer à écrire votre HTML et votre CSS. Examinons-les ci-dessous
Règle 1 : Le sélecteur CSS le plus spécifique s’applique.
Si un élément HTML est visé par plusieurs sélecteurs, le navigateur appliquera la règle CSS du sélecteur le plus spécifique.
Supposons qu’un élément soit ciblé par un sélecteur d’identification et un sélecteur de classe. Dans ce cas, comme le sélecteur d’identification est plus spécifique, le style CSS du sélecteur d’identification sera appliqué à l’élément plutôt que le style du sélecteur de classe.
Examinons ci-dessous un exemple illustrant cette règle.
Supposons que vous souhaitiez que les boutons soient de couleur marron sur votre site Bootstrap. Vous utiliseriez alors un sélecteur de classe pour définir tous les éléments de la classe de bouton comme ayant une couleur d’arrière-plan marron (code couleur hexadécimal #80000) et une couleur de police blanche (#FFFFFF). Mais vous souhaitez que le bouton d’abonnement de votre page d’accueil fasse exception à la règle afin qu’il soit plus accrocheur. Dans ce cas, vous pouvez utiliser un sélecteur d’identifiant pour définir le bouton avec l’identifiant « homepage » comme ayant une couleur de fond fuschia (#FF00FF) et une couleur de police noire (#000000). Tous les boutons Bootstrap sans l’ID « homepage » suivront toujours la règle CSS du sélecteur de classe.
Voici le CSS :
« `
#homepage {
background-color : #FF00FF ;
couleur : #000000 ;
}
.btn {
background-color : #800000 ;
couleur : #FFFFFF ;
}
Voici le HTML :
« `
Règle 2 : Si les sélecteurs CSS ont une spécificité égale, alors la dernière règle s’applique.
Si plusieurs sélecteurs sont appliqués au même élément HTML et qu’ils ont le même niveau de spécificité, le navigateur appliquera la règle CSS du sélecteur apparu plus loin dans la feuille de style.
Reprenons l’exemple ci-dessus. Supposons que vous ayez appliqué les deux sélecteurs à vos éléments de bouton Bootstrap, chacun avec des règles différentes pour les couleurs de police et d’arrière-plan, mais les sélecteurs étaient tous deux des sélecteurs de classe. C’est alors le dernier qui s’appliquerait.
.btn {
background-color : #FF00FF ;
couleur : #000000 ;
}
.btn {
background-color : #800000 ;
couleur : #FFFFFF ;
}
}
}
Règle 3 : Inline CSS a la spécificité la plus élevée.
Les feuilles de style CSS peuvent être écrites de trois façons : en ligne, dans la section
d’un document HTML, ou dans une feuille de style CSS externe. Le style en ligne, également connu sous le nom de « feuille de style intégrée », est le plus spécifique et l’emporte automatiquement.Cela est logique compte tenu de la règle précédente qui montre que l’ordre compte. Le CSS en ligne est le plus proche de l’élément HTML, il est donc plus spécifique et est donc appliqué. Voyons un exemple démontrant cette règle ci-dessous.
Voici le CSS de la section :
.btn {
background-color : #FF00FF ;
couleur : #FFFFFF ;
}
}
.
Comment contourner la spécificité en CSS ?
En CSS, la propriété !important est l’exception à toutes les règles de spécificité mentionnées ci-dessus et prévaut donc sur toutes les autres déclarations sur un élément.
Bien que vous puissiez être tenté de tirer parti de cette seule règle, plutôt que de suivre les nombreuses autres règles de spécificité lors de la combinaison des valeurs de propriétés, ne le faites pas. L’utilisation de la propriété !important est considérée comme une mauvaise pratique car elle rompt la cascade naturelle des feuilles de style. Cela rend la maintenance et le débogage de votre site Web beaucoup plus difficiles, surtout si vous travaillez avec une équipe de développeurs.
Dans certains cas, il est possible d’utiliser la propriété !important, par exemple lorsque vous définissez des classes utilitaires. Nous allons donc examiner brièvement un exemple ci-dessous.
Disons que vous voulez que tout élément ciblé par la classe bouton ressemble au même bouton. Vous appliquerez alors des propriétés de style uniques avec le sélecteur de classe .btn. Tout va bien pour l’instant. Au cours de la construction de votre page Web, vous ajoutez une nouvelle section avec le nom d’ID « content » contenant un lien avec la classe de bouton. Vous ajoutez également une autre règle à votre CSS, définissant tous les éléments avec le nom d’ID « content » pour avoir une bordure bleue pointillée.
Vous avez maintenant deux sélecteurs qui ciblent le même élément HTML. Et, comme nous le savons, étant donné qu’un sélecteur d’ID a une spécificité plus élevée qu’un sélecteur de classe, le style CSS du sélecteur d’ID a la priorité sur le style CSS du sélecteur de classe. Le deuxième élément aurait donc une bordure bleue en pointillés au lieu d’une bordure noire pleine. Pour éviter cela et faire en sorte que les propriétés de style de la classe .btn s’appliquent à tous les éléments sous ce nom de classe, quels que soient les types ou l’ordre des sélecteurs, vous pouvez ajouter la propriété !important.
.button {
background : red !important ;
couleur : blanc !important ;
padding : 3px !important ;
border-radius : 5px !important ;
border : 1px solid black !important ;
}
#content a {
border : 1px dotted blue ;
}
}
}
Section id= »content »>
texte blah Do Thing
Soyez précis avec votre CSS
Il est important de comprendre les règles de spécificité pour avoir un contrôle total sur votre HTML et votre CSS. Grâce à ces connaissances, le formatage s’affichera comme vous le souhaitez et vous n’aurez pas à chercher une erreur dans votre code.
Commentaires récents