Importance of CSS Stylesheet Hierarchy

.tribe-events-tooltip.tribe-event-featured {  color: red;}
.tribe-events-tooltip {  color: blue;}

<div class="tribe-events-tooltip tribe-event-featured">Example</div>

More important than !important (a higher level !important)?

No, there is no keyword or other way to make a declaration more important than !important. There is no known activity to change this.

In general, it is possible to override a declaration that has !important by using a rule that also has it and that has higher specificity. However, a declaration in a style attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important.

There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style attribute.

Order of prioritization when using multiple contradictory css files

Quick Answer:

If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one.

BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.

---

Example 1:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

The above example will make the color red. Both selectors are the same, and therefore also have the same specificity. And because CSS reads top-to-bottom, we first tell it to be blue, but then we override that by telling it "nevermind, make it red".

---

Example 2:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

The above example will make the background color blue, even though blue was first because the selector is more "specific".

---

Exception (the use of !important):

The inclusion of !important will override both specificity and order, but in my opinion, should only be used if you're trying to mess with a third party code in which you don't have access to change it any other way.

---

External CSS:

Overwrite rules work the same on external CSS files. Just imagine putting them first-to-last, top-to-bottom. The selectors called in the first file(s) will get overwritten by same-specificity-selectors in any subsequent files. But specificity will still trump order within the same file or in multiple files.

---

How to test:

In Chrome, Firefox, and modern versions of IE (probably Safari too), you can right click on something and click "Inspect Element". This will show you the HTML as well as any applied CSS. As you scroll down the CSS (usually on the right), you'll see things that are crossed out - that means they're either incorrect CSS or have been overwritten. To test, you can modify the CSS selectors (either in your own code or right there in the developer tools box) to make them more specific and see if that makes then un-crossed out...etc. Play around w/ that tool - it's VERY helpful.

Not sure how "specific" something is?
Try some of the many online CSS specificity tools:

• https://polypane.app/css-specificity-calculator
• https://specificity.keegan.st/
• https://www.codecaptain.io/tools/css-specificity-calculator

In which order do CSS stylesheets override?

The rules for CSS rule cascading are complex -- rather than trying to paraphrase them badly, I'll simply refer you to the spec:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.

if we apply some properties in both html and css code which one will apply first and which will be finally applied

inline-styles in a document have the highest priority, so for example say if you want to change the color of a div element to blue, but you've an inline style with a color property set to red.

<div style="font-size: 18px; color: red;">
   Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue; 
   /* This Won't Work, As Inline Styles Have Color Red And As 
      Inline Styles Have Highest Priority, We Cannot Over Ride 
      The Color Using An Element Selector */
}

if you want to apply external css definition then here is a link

use !important, note, !important is important here, else it won't over ride the inline styles..

Note: Using !important ONLY will work here, but I've used div[style]
selector to specifically select div having style attribute

Here Is a full details about all you want.

Should I write the full hierarchy path in my CSS definitions for each element/class?

As with any code (or any writing), you should write it to express your intended meaning as clearly and accurately as possible.

So, if you want any element with a class of property that’s a descendant of an element with class of item which itself is a descendant of an element with an id of container to have these styles, then write #container .item .property.

If you want an element with a class of property to have these styles regardless of what it’s a descendant of, then write .property. This is appropriate for classes that you want to use in a lot of different places on the site; e.g. button styles.

One thing I would note is that every CSS selector you add increases the specificity of the selector, i.e. #container .item .property is more specific than .property. So styles applied with #container .item .property will require a selector of greater specificity to override them if you want to later, forcing you to write this longer selector out again. But I think that’s a secondary concern compared to writing what you mean.

Make !important the whole .class selector

No, it's not possible. !important is thought to be an instrument of last resort and as such should be used sparingly. !importanting whole selectors would caricature that idea.

If you need to trump other styles, use CSS specificity to your advantage. You can use, e.g., these techniques to push your style declarations to the top:

• double class name will trump single class name:

  .custom-selector.custom-selector > .custom-selector

• ID trumps class:

  #custom-id > .custom-class

• IDs can be duplicated, too:

  #id#id > #id

• inline styles trump any stylesheets:

  <style>
  p#id#id.class.class { color: green; }
  </style>
  <p id="id" class="class" style="color:red">I am red!</p>
  

CSS: Importance of specifying object over generic dot?

It will be important for element specificity.

.foo targets any element that has a class of "foo".

div.foo targets only <div>s that have a class of "foo". That means other elements with that class aren't selected.

If you're sure only one kind of element will ever bear a given class, I guess there's nothing wrong with prefixing the class selector with the element name for readability, or leaving it out completely if you're lazy to type.

However, if you think other elements might bear this class — for instance if it's a pretty generic name like left, larger-font or sep, it's a good idea to do this so you're sure you're styling the right elements.

If there are any common styles shared by any elements with a given class, you specify just the class selector and add the common styles there, then after that specify any styles that pertain to each individual element. For example:

.foo { /* Generic styles for foo class */ }
div.foo { /* Styles for <div>s with foo class */ }
blockquote.foo { /* Styles for <blockquote>s with foo class */ }

---

Related Topics