Pewnie nie o to tobie dokładnie chodzi, ale
efekt można uzyskać też przez
color: inherit;
z elementu "rodzica", gdy tekst jest elementem "dzieckiem"
<div class="parent">
<div class="child">
kolor tekstu<br>pobrany z parent
</div>
</div>
html, body {
margin: 0;
}
.parent {
width: 100vw;
height: 100vh;
background-color: red;
color: red;
}
.child {
display: grid;
place-items: center;
font: 900 2em/2 arial;
width: 100%;
height: 100%;
background-color: yellow;
color: inherit;
}
przez użycie zmiennej w css
:root {
--parent-bg-color: red;
}
html, body {
margin: 0;
}
.parent {
width: 100vw;
height: 100vh;
background-color: var(--parent-bg-color, red);
}
.child {
display: grid;
place-items: center;
font: 900 2em/2 arial;
width: 100%;
height: 100%;
background-color: yellow;
color: var(--parent-bg-color, red);
}
[ Using CSS custom properties (variables) ]