What are the priorities among CSS selectors

Question

CSS Question: If two different selectors apply to an element, who wins?

I know this shouldn\'t happen, but I want to tweak a legacy application, and the CSS is getti

Answer 1

See the specificity order section of the specification (along with the rest of that chapter as !important rules and the order the rules appear in the stylesheet have an impact too).

Answer 2

you have to find #no of id =A ,#no of class =B and #no of tag =c in the selector

ABC with higher value wins.

.wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

100>022>021

so #foo wins

Answer 3

"#id" is more powerful than ".class" name and ".class" is more powerful than "tag" name. But if we apply "!important" than its priority is most of them.

• !important
• inline style
• id
• class
• tag

Answer 4

CSS stands for Cascading Style Sheets. This means that rules apply to elements in a cascading way. It's perfectly normal that different selectors apply to an element. Thinks, for example, to the following:

<div class="wrapper">
  <div id="foo" class="bar" style="some rules">Test</div>
</div>

The following rules would affect to the "foo" element:

.wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

Rules for priorities can be found here.

I always advise to use the Firefox "firebug" plugin. It will show you exactly which properties are evaluated for a specific element and why, emphasizing overrides during the cascade.

Answer 5

The gory details in the spec are actually reasonably readable. In summary:

1. !important rules and inline style rules win most.

2. Otherwise, normally the more specific wins. #id is a more specific selector than .classname is a more specific selector than tagname.

3. Where rules are equally specific, the one declared last wins.

There is no particular reason why this ‘shouldn't happen’. It's normal to specify a broad-brush rule and then add a more specific rule to target one case; multiple same-property rules on a single element are not unusual or undesirable.

Answer 6

It should happen! That's why it's called CASCADING style sheets. You can find an example of the priorities here