H1 specificity

If I add an ID to a heading tag, then shouldn’t it be more specific than a regular H1 and thus ignore the H1 styles?


It will override the styles in h1{} that are set.

h1{} === 0001
h1#whatever {} ===0101

0101 > 0001 always.


I tried both of these, but the H1 style always wins…

    <h1 id="companyBranding"><a href="/">

    <h1><a id="companyBranding" href="/">

Ah, but option #2 isn’t styling the h1, it’s styling the link, which may have more specific styles to it.

I think we’ll need a little more detail…any css for h1, any css for @companyBranding.

You can also use the inspect element and/or firebug to look at that element and see what styles are being applied to it…


I keep changing my mind.

Today I decided that in the page header, I do not want the address hyperlinked, but I do want the company name - and associated company logo - hyperlinked.

I was tweaking Paul O’Brien’s code when I broke things.

Where should I be applying things like Margins, Padding, Font Size, Color, and Text Decoration?

I think my problem is that I was applying everything to < h1 > < a >

<h1 id="companyBranding"><a href="/">ACME, Inc.</a></h1>
h1#companyBranding a:before{
    content: "";
    float: left;
    width: 80px;
    height: 80px;
    background: url('/images/logo3.png') no-repeat 0 0;
    margin: -4px 10px 15px 0;

h1#companyBranding a{
    margin: 0;
    padding: 0.5em 0 0.1em 0;
    font-family: Georgia, Serif;
    font-size: 1.7em;
    color: #000;
    text-decoration: none;

Whereever it should be applied to. Depends on the situation and what you are going for.

You ask a lot of ambiguous questions that are open to interpretation due to the circumstances. Paul has told you before but I’ll say it again: There is no one-size-fits-all CSS answer. It’s adaptive to the situation.

It’s not like PHP (using PHP since I know you work in it) where there are absolutes (PDO is best; hash password, etc.)

It seems the problem is that I needed to have the Margin, Padding and Font-Size in the < h1 > and not the < h1 >< a >

    margin: 0;
    padding: 0.5em 0 0.1em 0;
    font-size: 1.7em;

Again, I guess this shows my ignorance in CSS, but I thought that h1#companyBranding a would override what was in the standard h1


Basically, you’ll need to apply the styles to the h1, then add a h1#companyBranding a for anything specific to the link. You’ll have to add coloring and text-decoration, and almost certainly have to add link states as well.

The problem is not that I need to add them to h1 but that adding them to h1#companyBranding a doesn’t override what is in h1

By adding the Margin, Padding, and Font-Size to h1#companyBranding I overrode the styles associated with the standard h1 that was screwing things up.

As far as things like color and text-decoration, I’m not sure if this must be in h1#companyBranding a or if they could also be in h1#companyBranding

Follow me?

I’ll make this simple for you to help you understand. Ultimately, that rule is only doing this

You just make it more specific by adding on h1#companyBranding.

The element on the end of the selector is ultimately what you are targeting. It doesn’t matter what comes before it since you are only trying to be more specific in your selector.

1 Like

OK, I’m confused. You should only have one h1 per page, period. I assumed (bad idea on my part) that you were looking to do something specific to a page. If you’ve got multiple h1s on the page, you have other problems from a semantic standpoint.

That being said, if h1#companyBranding doesn’t override what’s in the h1, then the h1 must have more specificity in the declaration than just h1.

Did you use fire bug or inspect element to look at the element in question to see what css is being applied to it? It will help you greatly, more so than us trying to guess what your full html and css looks like.

Yep, I learned that the hard way!

I only ever have one h1 per page.

But in my main style sheet all heading have padding assigned to them. And the default h1 style was messing up what I needed in my page header.

The problem was what @RyanReese said above about the a{ }

Yep, I always go to FireBug before asking for help here. But I was stuck on this one. Fortunately I think I solved things through trial and error, plus Ryan validated what I noticed.

In which case, would it not be easier to simple remove the h1 from the default heading styles and style it as you wish for the page header?

Now that I understand how things work, the way I did is best.

It’s always the little things that tie you up when you are coding. Live and learn!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.