Surcharge et héritage des variables CSS
Surcharge et héritage des variables CSS
HTML
index.html <p>p {}</p>
<div>
<p>div > p {}</p>
</div>
<span>span {}</span>
<p>p <strong>strong {}</strong></p>
CSS
style.css @layer demo {
:root {
--color: red;
color: red;
font-size: 1.5rem;
}
div {
--color: orange;
color: var(--color);
}
/* le paragraphe sera en rouge */
/* il hérite du parent le plus proche */
/* car pas de propriété déclarée sur le p */
p {
/* par contre, si des enfants de p déclarent une propriété utilisant cette variables alors le bleu lui sera appliqué */
--color: blue;
}
/* le span sera en vert*/
span {
--color: green;
color: var(--color);
}
strong {
color: var(--color);
}
}
@layer demoStyles {
body {
flex-direction: row;
height: 100svh;
}
p,
span {
border: 1px solid;
padding: 1rem;
background-image: linear-gradient(45deg, black, #222);
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
}
}