applying !important to all properties' values once - html

I am giving !important to all of the css propertis' values like this
.someclass{
color: #f00 !important;
background-color: #ff0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
display: block !important;
}
Is there any method to apply only once !important that all values get !important of .someclass?
Edit
suppose main div is controlled with some scripts and then how could I give !important to all at once.

No, but there is a better way. Make the selector more specific than the selector that you want to override. You can for example specify the element name in the selector to make it more specific:
div.someclass {
color: #f00;
background-color: #ff0;
margin: 0;
padding: 0;
width: 100%;
display: block;
}
Not only is it simpler, it's also possible to further override this with an even more specific selector. Adding !important only works in one level.
The specificity of a selector is basically calculated by the number of identifiers, the number of class names and the number of element names that it contains, in that order. For example a selector like div.item .cost with two class names and one element name is more specific than a selector like div span.count with one class name and two element names.

There is no way to do it. Write better selectors instead.

SHORT ANSWER: NO there is not (as far as i know);
LONG ANSWER:
the css has a very nice but sometimes annoying hierarchy system
first of all adding !important is not an adviced move it can do some harms to your page speed and may be some hard times in your next editting to find what cause something not work as it intended.
you can make something stronger priority by determining it with its ID or by making it a decendant like this:
.somediv > li > a {
color: #000;
background: #fff;
}
and it will over ride this:
a.something {
color: #fff;
background: #ff0;
}
and this will over ride both:
a#something {
color: #f00;
background: #0f0;
}
and these will override all but the second is stronger by the way:
a.something {
color: #0f0!important;
background: #00f!important;
}
a#something {
color: #0f0!important;
background: #00f!important;
}

Related

Why isn't my last instruction taking precedence? CSS

Here is my CSS source code
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
.menu ul {
display: inline-flex;
margin: 50px;
}
.menu ul li {
list-style: none;
margin: 0 20px;
color: #b2b1b1;
cursor: pointer;
}
.logo img {
width: 30px;
margin-top: -7px;
margin-right: 48px;
}
.active {
color: #19dafa !important;
}
.search {
margin-left: 398px; /* problem in this line */
}
I have a ul full of li's, and I set their properties in the ".menu ul li {}" category. The thing is I don't want ALL of them to have the same properties, I want the last one which is a search bar to be all the way on the right, like so:
" - - - - ___________ -"
where each "-" represents an li and the "_" is the space in between. The problem is in the very last category I made the margin-left 398 pixels. But despite that being the last instruction it is still following the instructions set before.
When I use !important it works, but I don't see why I would need to use it when supposedly the final instruction takes precedence?
The problem also applies in the .active class as well. Why do I have to use the !important to get it to work? Seems like a hassle if I have to use !important everytime I want a unique property in one of my elements.
EDIT:
I ended up finding a work-around by typing:
.search {
right: 20px;
position: absolute;
}
but my question still stands.
The final rule in your CSS does not take precedence. The various selectors of a CSS rule combine to form a specificity number which is what determines which CSS rules are applied. Classes, tag names, IDs, and other element attributes each increase the specificity score of a rule -- the more selectors, the more specific the rule.
You add together all of the specificity weightings and can essentially read it like a 4-digit number. For example, using a tag gives +1 while a class gives +10 (this isn't totally accurate, see reading materials at end). So your rule for .search has a specificity of 10 since it's just a class, while your rule .menu ul is 11 since it's a class with a tag. When applied to the same matching elements, the properties defined in .menu ul will take precedence over .search despite .search being written last.
!important essentially acts like a boolean flag to work regardless of the specificity scores. However, two rules with !important flags will still fall back to specificity. Similarly, if two rules have the same specificity, only then does the last one written take precedence.
For further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://css-tricks.com/specifics-on-css-specificity/

How do I use multiple classes with one ID selector?

I want this to happen:
.category-news #main-header {
background: #001846 !important;
}
.category-sports #main-header {
background: #001846 !important;
}
But instead of 2 lines of code, can I combine it into 1?
Since IDs are unique in the document and have very high specificity any selectors before them makes no difference - so both of your selectors actually always select #main-header and can be safely merged into one:
#main-header {
background: #001846 !important;
}

CSS Exclude Syntax

I want all the anchor links within a <div class="status-outer"> to be white, except for those anchor links that are inside an <li> tag that is inside a <ul class="dropdown-menu"> tag.
Searching around, I came up with the following. Unfortunately, it doesn't work. It seems none of my anchor links are white.
.status-outer a:not(ul.dropdown-menu > li > a) {
color: #fff;
text-shadow: none;
}
Can anyone help me find the problem?
Note that I have found other articles about exclusion syntax (that's how I came up with the code above), but I couldn't find any examples that were specific to my needs.
.status-outer a { color: #FFF; }
.status-outer .dropdown-menu li a { color: #000; }
The negation pseudo-class, :not(X), is a functional notation taking a simple selector
You'll need to do something like this:
.status-outer a { color: white; }
ul.dropdown-menu > li > a { color: inherit; }
Not sure, whether color may be inherit.
Add a second class to those list elements that you don't want to be white, with a CSS "color" rule to overwrite the previous.
The :not() pseudo-element can only take simple selectors, which basically means single things, such as body, #id, .class, or [attribute]. You can't specify an entire selector within it.
You'll have to specify two separate selectors. One that sets the anchor to white, by default, and another that sets it to inherit the color of its parent element, if its contained within a list.
.status-outer a {
color: #fff;
text-shadow: none;
}
.status-outer ul.dropdown-menu a {
color: inherit;
}
The only problem you'll run into is that text-shadow does not have an inherit value, meaning you can't re-add it as its parent's value once you've removed it, you'll have to re-specify it. I don't know if that's 100% applicable here or not.

How to stop my css declaration from being overridden

I have a div with classes of A B C
I added a style to c to show the color as "Red";
The problem is it's overridden from the styles of A and B.
I read that !important only prevents the css being overridden by the inline style but does not prevent the override by other css.
How do I mark the style of C as the strongest?
Increase the specificity of rule C above that of rules A and B. Normally I would include some explanation here, but the one over at the linked site is superb.
An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has. It should be noted here that the phrase “!important declaration” is a reference to an entire CSS declaration, including property and value, with !important added.
Here is a simple code example that clearly illustrates how !important affects the natural way that styles are applied:
#example {
font-size: 14px !important;
}
#container #example {
font-size: 10px;
}
In the above code sample, the element with the id of “example” will have text sized at 14px, due to the addition of !important.
div.a, div.b {
background-color: #00f;
}
div.c {
background-color: #f00 !important;
}
The !important will up priority of rule and inheritance will be ignored.
div.a, div.b, div.c {
background-color: #00f;
}
div.c {
background-color: #f00;
}
should work, CSS is sequential. This means the last style for that element is applied of no more specific style is available. More specific would be for example
body div.c {
background-color: #f00;
}
!important should work just fine, but if not you can chain your classes in your declaration like so:
div.a.c,div.b.c,div.a.b.c
{
color:red
}

when to use !important property in css?

Merged with When to use the !important property in CSS [duplicate].
#div p {
color: red !important;
}
...
#div p {
color: blue;
}
I understand how !important works, in this case the div will render red because now it has priority (!important). But I can't still figure out an appropriate situation to use it. Does anybody know any example where !important saves the day?