CSS Class Priorities

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 prioritize a CSS class?

With CSS Specificity, you should just override the more specific selector with your own.

.panel-default > .panel-heading .badge.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

Edit: Other options can include:

1. Removing/Altering the offending CSS file (difficult with bootstrap, but doable, and maintenance headache if you decide to update bootstrap.css)
   
   
   • Update/remove offending selectors
   • Adding :not() selector to avoid certain scenarios
2. Altering your HTML Structure so that it does NOT follow the offending CSS selectors.
   
   
   • Changing class names and/or using new ones
   • Inserting/Deleting additional nested divs/elements (to avoid > direct-child selector)

Thankfully, if you have lots of classes to update, a smart regex replace is your best friend, but that's another topic.

CSS class priorities

This sounds like a CSS specificity problem. Try changing your .selectedItem ruleset to:

.dynamicList li.selectedItem {
  background-color: #0000ff;
}

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.

How do I give a CSS class priority over an id?

Do not use !important because it is the worst solution, if you want to switch the styling then do it that way.

#idname{

  border: 2px solid black;

}

#idname.classname {

  border: 2px solid gray;

}

<div id = "idname" class="classname">it is a test</div>

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.

Css class priority when Adding Dynamic Class

Your div is red instead of blue because of your style declaration order:

.hello {
  background-color: blue;
}

.mystyle {
  background-color: red;
}

CSS specificity is not dependent on the order in which you apply the class to an element, but rather the order in which you declare the class in the style. In this case, you have declared .hello then .mystyle, meaning .mystyle has high specificity compared to the .hello and hence, you get the red background.

Priority on css classes

The priority of CSS declarations relies on their order in the CSS (later declarations override earlier ones) and their specificity (more specific declarations override less-specific ones). (It has nothing to do with the order you specify the class names in the attribute.) More in Section 6 the specification.

Here's an example of order. This CSS

.foo {
    color: red;
}
.bar {
    color: blue;
}

with this HTML

<p class="foo bar">Hi there</p>
<p class="bar foo">Hi again</p>

...results in two blue paragraphs, because the second declaration takes precedence over the first. (Live example) That happens because both declarations have the same specificity.

Here's a demonstration of specificity:

This CSS

p.foo {
    color: red;
}
.bar {
    color: blue;
}

...with the same HTML results in two red paragraphs, because the selector p.foo is more specific than the selector .bar, so it takes precedence even though it's earlier in the CSS. (Live example)

---

Related Topics