The problem is that I am unable to override a nested css selector with an exactly matching selector later in the css.
It appears the specificity calculation is requiring the override exactly match all possible selectors of the original rule, even though the whole point is that I want to override a nested element in only ONE of the TWO possible selectors.
Can someone explain to me if this is intended as part of the spec and why (if so)? Because It makes no sense that it should require I override the main wrapper exactly as that completely negates my ability to do what I’m trying to do.
body {
font-familY: sans-serif;
font-size: 1.125rem;
}
em {
display: block;
font-size: 1rem;
margin-inline: auto;
max-width: 50ch;
}
div.modal div.title,
#main div.title {
p {
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
}
// This is the override, it matches exactly, but is
// treated as less specific for some reason.
// Even if you nest the p selector it does not work.
div.modal div.title p {
text-align: left;
}
// The "modal title" should be left justified but it is not.<div id="main">
<div class="title">
<p>This is a page title</p>
<em>// Selector for the page title should be "#main div.title p"</em>
</div>
</div>
<div class="modal">
<div class="title">
<p>This is a modal title</p>
<em>// Selector for the modal title should be "div.modal div.title. p"<br>
// Which means that this should match exactly the first CSS rule and the override rule (exactly). The override should be applied due to appearing later in the cascade. Yet the browser treats the earlier rule as higher specificicity and the override is not applied.
</em>
</div>
I also have a codepen if you prefer:
https://codepen.io/RickKukiela/pen/gOyNBOb