CODEWITHSUNDEEP
htmlcss
DanAllen
DanAllen

Reputation: 382

How Are These Styles Cascading?

Problem is viewable at this link. http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForward.html

The three boxes need to have green backgrounds, but another style is taking precedence. I thought styles were supposed to take precedence based on where they appear in the style sheets, with styles lower in the style sheet cascading (taking precedence) over styles higher in the style sheet. I guess that is wrong, because the style sheet for the background colors of those boxes is here:

    #maincontent .col {
    background: #ccc;
    background: rgba(204, 204, 204, 0.85);

}

#callout1   {
    background-color: #00B300;
    text-align:center;
}
#callout2   {
    background-color: #00CC00;
    text-align:center;
}
#callout3   {
    background-color: #00E600;
    text-align:center;
}

When the style for "#maincontent .col" is removed, the green shows up (link)http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForwardGreen.html, but I thought the green should show up because it is after the gray color specified higher up.

I am finding a way to get what I need, but it would really make it a lot easier if I understood why the backgrounds are gray, instead of green.

Any assistance would be extremely much appreciated. Thank you.

Upvotes: 0

Views: 105

Answers (5)

jacmkno
jacmkno

Reputation: 1317

It´s not just about what style goes first in the stylesheet. The precedence works like this:

  1. The rule with more ids on it wins. (#signs)
  2. With the same number of ids on it, the one with more classes wins (things with dots eg:.example)
  3. If they have the same number of ids and classes, the rule with more elements wins.
  4. Inline styles win regardless of the previous rules. These are styles embedded with the "stlye" attribute in the markup.
  5. Rules with !important win regardless of all previous rules. eg: .thing{width:30px !important;}. Among rules with !important flag, the previous rules are applied again.
  6. For rules with the same number of classes, ids, elements and with no !important rules, the order in the stylesheet or in the page is what matters (the latest rule wins).

So what you think is important is actually the less important factor regarding css rule precedence.

In your example the first rule wins because it has one ID and one class, which has more "specificity" than one single ID in the other rules. If you don´t want it to win you have to add one class in the other rules or remove the class from the first rule which may require changing your markup a bit...

Reading the specification is very enlightening.

http://www.w3.org/TR/CSS2/cascade.html (Section 6.4.3 "Calculating a selector's specificity")

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8161

There is a css #maincontent .col, which is more specific to element.So for this work -

  1. You can use !important after your style. Example

  2. You can make your css like this #maincontent #callout1, which is more specific than #maincontent .col. Example

  3. You can apply inline css to element. Example

  4. You can replace your #maincontent .col to .col. Example

Upvotes: 0

Cody Guldner
Cody Guldner

Reputation: 2886

The problem is that #maincontent .col is more specific than #callout

If you changed it to something like #maincontent .section #callout, your styles would work, because it has a higher specificity.

Don't use !important, because it can cause a lot of problems further on down the road

Upvotes: 1

DA.
DA.

Reputation: 40673

'Cascade' in CSS refers to specificity of styles.

All things the same, styles appearing later in the CSS trump those before.

But there are other ways to increase specificity--namely in how 'specific' you are in referring to your elements.

For example, this:

table.myClass {style}

is more specific than:

table {style}

So even though I may order them that way, the first style would trump the second on any table that uses that specific class.

In your case, #yourID .col is more specific than just #anotherID

How specificity is calculated can be a little tricky. Here's but one explanation and another explanation.

In your case, specifically, "ID + child class" trumps "ID".

Upvotes: 3

itsmejodie
itsmejodie

Reputation: 4228

The following take precedence (in order) when choosing which style to apply to an element:

  1. !important (adding !important to the definition)
  2. Origin (inline style tag, or in a stylesheet)
  3. Specificity (how specific in the hierarchy your selector is)
  4. Order (higher -> lower in the stylesheet)

In your case specificity is the winner because the selector is more specific in the hierarchy.

If you did not have #maincontent .col and just .col your ID selectors would be more specific and thus apply.

However - since !important is number one in the precedence order, you can always add !important to become the overriding style definition.

Upvotes: 1

Related Questions