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•12mo ago

can you show a screenshot of the inspector?

AndrewOP•12mo ago

Coder_Carl•12mo 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

AndrewOP•12mo 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•12mo 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•12mo ago

i suspect some sort of broweser extension is inserting that.

Coder_Carl•12mo 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.

AndrewOP•12mo 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.

Gaming

Programming

Class being Overwritten by :is