Spécificité
Si j'essaye ce css...
body {
background-color: yellow;
}
body {
background-color: grey;
}
C'est assez évident logique que le fond de mon body soit gris.
De la même manière, si j'ai un fichier css à part :
/* global.css */
body {
background-color: yellow;
}
et un <head> comme ceci
<head>
<link rel="stylesheet" href="global.css" />
<style>
body {
background-color: grey;
}
</style>
</head>
Alors mon body sera encore gris, mais si je change l'ordre de mon <head> pour ceci:
<head>
<style>
body {
background-color: grey;
}
</style>
<link rel="stylesheet" href="global.css" />
</head>
Alors mon body sera jaune.
En conclusion, les valeurs déclarées après, s'appliquent par-dessus celles déclarées avant.
Et c'est aussi pour ça qu'il faut importer votre style global avant d'ecrire votre style local.
Mais...
... vous avez vu le titre du chapitre, ce n'est pas aussi simple.
Si j'ecris ceci :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.stylish {
background-color: orange;
}
body {
background-color: grey;
}
</style>
</head>
<body class="stylish"></body>
</html>
On voit que notre body est pourtant orange.
Il existe des règles de spécificité. Au début de ce chapitre, on a vu comment ça se passe pour des sélecteurs de spécificité égale (identique même!), mais quand une sélection par classe et une sélection par tag se disputent, c'est la sélection par classe qui l'emporte, peu importe qui passe en deuxième.
Pour m'en rappeler, je me dis qu'une classe est plus spécifique qu'un tag parcequ'on a fait l'effort de la mettre.
Et vu qu'une classe "button" c'est "UN bouton" alors qu'un identifiant "button" voudrait dire "LE bouton" alors on ne sera par surpris d'apprendre que l'identifiant a une spécificité plus forte.
Les sélecteurs combinés
Pour faire au plus simple, combiner des sélecteurs additionnent leurs specificités. Sauf qu'il suffit d'une seule classe pour être plus spécifique que tous les tags possibles, et d'un seul identifiant pour être plus spécifique que toutes les classes possibles.
- 1 classe > ♾️ tags
- 1 id > ♾️ classes
Pourquoi les <a> sont bleus?
Au moment d'afficher une page, le navigateur va d'abord appliquer son style avant tous les autres. On pourrait imaginer un truc comme ceci (même si ce n'est pas comme ça que ça se passe)
<head>
/* forcément avant tout les autres */
<link rel="stylesheet" href="LE STYLE DU NAVIGATEUR.css" />
<link rel="stylesheet" href="global.css" />
<style>
body {
background-color: grey;
}
</style>
</head>
Dont une part ressemble à ça
a {
color: blue;
cursor: pointer;
text-decoration: underline;
}
Et c'est pour ça que dans un exercice précedent la solution proposée était
body {
background-color: black;
color: white;
}
a {
/* on repasse par-dessus ce que fait le navigateur */
color: white;
}
Spécificité de la cascade
Ok, mais si je reprend, l'exemple du lien juste au-dessus et que je met un identifiant sur mon body. Alors la couleur de mon body écrasera aussi la couleur de ses <a> parce que les navigateurs sélectionnent par tag?
Ça?
/* au lieu de juste "body" */
#dark-body {
background-color: black;
color: white;
}
Marche pas. Comme ça tu selectionne l'élément qui a l'identifiant body, tout ce qui en decoule a une spécificité de 0 parce qu'on ne les sélectionne pas directement. Donc le CSS des navigateurs qui sélectionne les <a> faiblement mais directement, gagne.
!important
Il est possible d'ajouter !important derrière vos valeurs pour donner une spécificité maximale à votre déclaration.
Commme ceci:
body {
background-color: yellow !important;
}
#my-body {
background-color: grey;
}
Identifiant ou non, mon body sera jaune.
Bon, par contre, je vais être très clair, si vous utilisez ca sans une excellente justification, je vous dégomme.
Si vous pensez en avoir besoin, c'est que vous avez perdu le contrôle de votre CSS. Je vous le montre uniquement pour que vous ne soyez pas désarmés si jamais vous voyez des gens l'utiliser.