Class being Overwritten by :is

I have the following code :
<section class="card">
<header class="card__header">
<h1>FAQ</h1>
</header>
<section class="card">
<header class="card__header">
<h1>FAQ</h1>
</header>
For some reason that I can't figure out it is getting overwritten by the following:
:is(article, aside, nav, section) h1
1.5em
:is(article, aside, nav, section) h1
1.5em
That is what the dev tools is showing. Any suggestions? TIA Here is here is the repo: https://github.com/andrewteece/faq-accordion-card
GitHub
GitHub - andrewteece/faq-accordion-card
Contribute to andrewteece/faq-accordion-card development by creating an account on GitHub.
8 Replies
MarkBoots
MarkBoots5mo ago
can you show a screenshot of the inspector?
Andrew
Andrew5mo ago
No description
Coder_Carl
Coder_Carl5mo ago
as Mark already is here I'm not getting involved but @Andrew when I looked at your repo's code (that you linked above) there was no :is inside of your styles. sometimes its a little bit hard to troubleshoot without code to reference. please keep things up to date inside of the question to help anyone who is helping you
Andrew
Andrew5mo ago
Yes, I have NO styles in my CSS using
:is
:is
From what I can detect it is getting the
:is
:is
from the user agent stylesheet
Coder_Carl
Coder_Carl5mo ago
yup, that would be coming in from your browser but the specificity level is off to over-write the .cardheader mayhaps you will need to specify that the h1 is within the cardheader to increase the specificity .card__header h1
MarkBoots
MarkBoots5mo ago
i suspect some sort of broweser extension is inserting that.
Coder_Carl
Coder_Carl5mo ago
Mark - I found this which I thought was interesting. https://web.dev/learn/html/text-basics#headings_revisited There is a code snippet in this section that talks about the selectors being present in the agent stylesheets I didn't think browsers were implementing this but apparently they are according to the article which was last updated in 2022. Kind of odd considering containers coming in and all imo
web.dev
Text basics  |  web.dev
How to format text using HTML.
Andrew
Andrew5mo ago
Doing
.card__header h1 {
padding-bottom: 1rem;
font-size: var(--fs-32);
}
.card__header h1 {
padding-bottom: 1rem;
font-size: var(--fs-32);
}
That did it. Thank you both for your help on this. I don't have any browser extension enabled. I tested the problem in both Firebox and Chrome, and both showed the same result in the dev tools.