How to Give One CSS Class Priority Over Another

#idname{  border: 2px solid black;}
#idname.classname {  border: 2px solid gray;}

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

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 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.

Can one CSS file take priority over another CSS file?

It depends on how you set them in your header. So something like this will work:

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

The last one will be picked up.

And an helpful link about stylesheets here:
http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

See also: Precedence in CSS if the above doesn't work for you.

Hope it is clear.

class overrule when two classes assigned to one div

Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:

<div class="rule1 rule2 rule3">Content</div>

This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.

CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.

If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.

So, if you had styles like this:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.

---

If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Then, it would take precedence and the background color here would be green.

---

If the two rules don't conflict:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Then, both rules will be applied.

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.

make high priority of external css class than internal and inline css

Its bad practice but can be done.

If you put !important after your selector it should overide inline styles.

Idealy though you would remove the inline markup.

Example

.myclass{
   color : red !important;
}

---

Related Topics