CSS Rule Priorities

CSS Rule Priorities

It's all about weight. A class selector gets trumped by an ID selector.

#Footer a

will always get precedence over

.Highlight or .Highlight a

Make your selector

#Footer .highlight a

and you should be fine.

What is the order of precedence for CSS?

There are several rules ( applied in this order ) :

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. A css rule with !important always takes precedence.

In your case its rule 3 that applies.

Specificity for single selectors from highest to lowest:

• ids (example: #main selects <div id="main">)
• classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
• elements (ex.: div) and pseudo-elements (ex.: ::before)

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

Example: compare #nav ul li a:hover to #nav ul li.active a::after

• count the number of id selectors: there is one for each (#nav)
• count the number of class selectors: there is one for each (:hover and .active)
• count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

A good article about css selector specificity.

Order of precedence of CSS rules

It is still blue. Attribute selectors are on the same level as classes. For more information see: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Priority of Selector in CSS Rules

You should take a deeper look at specificity:
http://www.standardista.com/css3/css-specificity/

#id selector = 100 "points"

.class and :pseudo-class selectors = 10 "points"

In your specific case, this will do the trick:

#tbl td:nth-child(odd){
    background-color:#F0FFE2;
}
#tbl tr:hover td.cell {
    background-color:#FFA270;
}

What are the priorities among CSS selectors

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.

Is it possible to give one CSS class priority over another?

1. specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
2. assign it after the other class
3. if two classes are in separate files, import the priority file second
4. !important

!important is the lazy way, but you really should go for #1 to avoid important-ception. Once you've added one !important you can't use it to make some other rule even more important.

how to change CSS priority (don't use !important)

The C in CSS stands for cascading. You just need to give it higher precedence then the other rule.

input.text
{
     border: 1px solid red ; 
}

How do I have a CSS classes priority be affected by what class it is more closely inside?

In this specific case you can use the child selector: >

https://jsfiddle.net/emsca2ww/7/

.class-2 > .target {
    background-color: green;
}

.class-1 > .target {
    background-color: red;
}

This only works for parent/child elements. Otherwise you would have to introduce more parent/child relationships if needed or rethink how you are using the selectors.

Selectors have specificity and cascade order. The above selectors have the same specificity because they are both composed of two classes. This falls back to cascade order. They exist in the same stylesheet as well, so the final priority rule is applied: order in the CSS document.

If you want .class-2 to have higher priority than .class-1, you have to move the selector after it in the stylesheet:

.class-1 .target {
    background-color: green;
}

.class-2 .target {
    background-color: red;
}

However, this has nothing to do with the HTML itself. There is no selector for closeness between parents and children in the HTML document. You could do something like:

.class-2 > * > .target

But this selector only works if .target is a grandchild.

---

Related Topics