Spécificité dans CSS
CSS peut être appliqué à n'importe quel élément de plusieurs manières (en ligne, interne et externe). Et si nous appliquons des styles au même élément par différents moyens (en utilisant en ligne, en utilisant ID ou la classe, etc.)? Dans un tel cas, le phénomène de spécificité CSS entre en pratique et il choisit le sélecteur CSS qui a une valeur de spécificité la plus élevée. Le concept de spécificité est comme la priorité de l'opérateur dans les langages de programmation.
Gardant à la vue de l'importance de la spécificité, ce guide démontre brièvement le fonctionnement et l'utilisation de la spécificité dans CSS.
- Comment fonctionne la spécificité CSS
- Valeur de spécificité des sélecteurs CSS
Comment fonctionne la spécificité dans CSS
Le fonctionnement de la spécificité dépend des sélecteurs CSS ou du type de CSS que vous utilisez. Cette section considère la comparaison de spécificité de la manière suivante:
- CSS en ligne, CSS interne et CSS externe
- Sélections CSS (ID, classe, cours pseudo, pseudo-éléments, etc.)
La feuille de style peut être en ligne, interne ou externe et ce qui suit est le niveau de spécificité de ces feuilles de style.
CSS en ligne> CSS interne> CSS externeD'après l'équation ci-dessus, il est conclu que le CSS en ligne a la spécificité la plus élevée par rapport au CSS interne et externe.
Maintenant, explorons comment les styles sont choisis s'il y a plusieurs sélecteurs CSS utilisés pour le même élément. La spécificité de divers sélecteurs CSS est définie par l'équation suivante.
Inline> Identifiant (ID)> Classes / pseudo-classes, attributs> éléments / pseudo-élémentsJusqu'à présent, la comparaison théorique a été retirée. Ayons une comparaison quantitative du score de spécificité et ce score de spécificité est calculé par les navigateurs de la manière suivante.
Pour ce faire, les concepts de comptage, dizaines, centaines et milliers de comptes sont appliqués sur les sélecteurs CSS pour obtenir une valeur spécifique. De telle sorte que le moins de spécificité (élément) est attribué 1 et le sélecteur de spécificité le plus élevé (en ligne) est attribué 1000. Le tableau suivant fait référence au score de spécificité de divers sélecteurs CSS.
| Sélecteur CSS | Spécificité |
|---|---|
| En ligne | 1000 |
| Identifiant (ID) | 100 |
| Cours, pseudo-classes, attributs | dix |
| Éléments / pseudo éléments | 1 |
Nous avons pratiqué quelques exemples retirés du concept fourni dans le tableau ci-dessus.
| Sélecteurs CSS | Exemple | Valeur de spécificité |
|---|---|---|
| En ligne | 1000 | |
| Élément avec identifiant | H1 # ID | 100 + 1 = 101 |
| Élément avec classe | H1.classe | 10 + 1 = 11 |
| Élément | H1 | 1 |
| Élément avec ID et classe | H1 # ID.classe | 1 + 100 + 10 = 111 |
| Classes multiples | .classe 1.classe2 | 10 + 10 = 20 |
Avec l'aide des informations fournies dans les tables ci-dessus, vous auriez mieux compris le concept de spécificité dans CSS. Faisons-les en utilisant les exemples suivants
Exemple 1: Utilisation de plusieurs sélecteurs CSS pour un élément
Cet exemple pratique divers sélecteurs CSS pour styliser l'élément «P».
Html
En utilisant le concept de spécificité
Dans le code HTML ci-dessus, le paragraphe est attribué id = ”one” et class = ”spec”.
CSS
Dans le CSS ci-dessus, le «Classe», «Id» et «Element» sont utilisés comme sélecteurs CSS pour "P". Chaque sélecteur CSS a l'intention de modifier la couleur d'arrière-plan du "P" élément.
Sortir
De la sortie, il est observé que la couleur d'arrière-plan est bleu ciel qui a été réglé par le id = "un" de l'élément "P".
Exemple 2: Utilisation de sélecteurs de la même spécificité
Il est possible qu'un élément soit approché par des sélecteurs CSS qui ont le même score de spécificité. Dans un tel cas, l'occurrence du sélecteur CSS est considérée, et le sélecteur ultérieur est choisi pour le style.
Cet exemple montre le même scénario en utilisant le code suivant.
Html
En utilisant les sélecteurs qui ont la même spécificité
CSS
Dans le code CSS ci-dessus, deux sélecteurs d'ID sont utilisés avec des styles différents. Le #Spec survenant plus tôt n'a qu'une propriété de couleur d'arrière-plan tandis que le #spec Se produire plus tard a plusieurs propriétés CSS.
Sortir
À partir de la sortie, il est observé que le id = ”spec” Le sélecteur survenant latéralement est sélectionné et les propriétés qui lui sont contenues sont appliquées à l'élément de paragraphe.
Conclusion
Chaque fois que plusieurs sélecteurs CSS essaient d'influencer un élément, le phénomène de spécificité décide quel style doit être appliqué. La spécificité de CSS a le rôle clé car les feuilles de style complexes peuvent contenir plusieurs sélecteurs pour chaque élément. Cet article démontre le concept de spécificité dans CSS. De plus, vous apprendrez également comment le score de spécificité d'un sélecteur CSS est calculé. Avec l'aide de cela, vous seriez en mesure de calculer le score de spécificité avant d'utiliser un sélecteur CSS.