Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS Inheritance - Why is a 'later' declaration being overwritten by an 'earlier' one?

CSS Inheritance - Why is a 'later' declaration being overwritten by an 'earlier' one?

Problem

I'm new to html and CSS but through the recent work I've been doing I thought I was getting a hold of how CSS works.. And it seemed to work kind of like scope in a language like Java.

My understanding was that, like Java, the Declaration with the narrowest scope wins.. aka the most specific declaration would override its inherited versions, allowing you to, like I am trying to do, declare a set pattern for a group of objects and then if one of those needs a slightly different setting you can simply override the general rule for that one item.

However, I'm getting the feeling this is not the case, here I have a tabbed content box I'm working on;

The html:

  • What We Do
  • What Makes Us Different
  • Our Background
  • Why We Do It

And of course I labelled the one list-item as "large" so that I could force its width to be a little wider so it can fit on one line.

The CSS:

ul#tabs li a {
    width: 144px;           //TRYING TO OVERRIDE THIS DECLARATION
    height: 33px;
    color: #42454a; 
    background-color: #fff; 
    border-left: 1px solid #000;
    border-right: 1px solid #000; 
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 3px;
}
    a#large {
        width: 155px;          //WITH THIS ONE
        display: block;
    }

What is happening is that the width of a"large" is being overwritten by a. (144px not 155px)

So, two questions:

  1. Is it possible to do what I am trying to do here-override an inherited trait?
  2. Is it possible to simply vertically align each of the 4 tab's text to be centered? (This would make up for the ugly look I'm getting from the one button being two lines, where the rest are just one)
Problem courtesy of: Alex

Solution

See Cascading. The order in which the CSS is encountered is only used as a final resort.

Both selectors have the same media type.

Both selectors have the same importance and origin.

The specificity of your selectors are different

ul#tabs li a         a=0 b=1 c=0 d=3
a#large              a=0 b=1 c=0 d=1

The top one is more specific, so it's the one that will get used.

But if you used ul#tabs li a#large, it would get selected because it has the highest specificity.

ul#tabs li a#large   a=0 b=2 c=0 d=3
Solution courtesy of: ikegami

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS Inheritance - Why is a 'later' declaration being overwritten by an 'earlier' one?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×