<a href="">anchor outside header</a>
<header id="header">
<a href="">anchor inside header</a>
</header>
<button id="foo">Toggle header's --primary-color into green</button>
::root {
--default-color: #000000;
}
header {
--primary-color: #ff0000;
}
a {
color: var(--primary-color, --default-color);
}
button {
margin-top: 20px;
}
document.getElementById('foo').onclick = function(){
document.getElementById('header').style.setProperty('--primary-color', 'green');
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.