This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
On day 37 we learned that we can get more control over specificity by creating layers. That first, simple example is pretty straightforward, but what happens if we mix layered and unlayered styles?
Let's start nice and simple with a single layer. The border of this quote is red.
<blockquote>
There's only one Return, okay, and it ain't of the king...
</blockquote>@layer base {
blockquote {
border: 4px solid red;
padding: 1rem;
}
}There's only one Return, okay, and it ain't of the king...
If we add another layer, the border color turns green because a layer defined later in the document has precedence over a layer defined earlier.
@layer base {
blockquote {
border: 4px solid red;
padding: 1rem;
}
}
@layer component {
blockquote {
border-color: green;
}
}There's only one Return, okay, and it ain't of the king...
If we add unlayered styles after the second layer, the color turns hotpink. Not because the declaration comes later in the document, but because unlayered styles have the highest priority and always* overwrite layered styles.
*Okay, not always, but we'll talk about that in another post.
@layer base {
blockquote {
border: 4px solid red;
padding: 1rem;
}
}
@layer component {
blockquote {
border-color: green;
}
}
blockquote {
border-color: hotpink;
}There's only one Return, okay, and it ain't of the king...
This means that the color will be hotpink even if the unlayered styles come before the layered styles.
blockquote {
border-color: hotpink;
}
@layer base {
blockquote {
border: 4px solid red;
padding: 1rem;
}
}
@layer component {
blockquote {
border-color: green;
}
}There's only one Return, okay, and it ain't of the king...
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-18T00:00:00+00:00) Day 40: unlayered styles. Retrieved from https://www.scien.cx/2022/11/18/day-40-unlayered-styles-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.