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;
}
Related
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/
I have 2 stylesheet files, style.css, and index.css which are loading respectively
1-style.css
2-index.css
in my style.css I have code like this
#mainNav nav > a:hover span:before {
background-color: transparent !important;
}
#mainNav nav a.darkBlue span:before {
background-color: #17729a;
}
now in my index.css
when I write
#mainNav .darkBlue span:before {
background-color: transparent;
}
It doesnt work and I should write !important at the end to make it work
but when I write selectors order in a different way like the way I used in my style.css it works without !important
like this
#mainNav nav a.darkBlue span:before {
background-color: transparent;
}
Why?
CSS has a hierarchy. If you you wanna overwrite some styles you have to use the same selectors or some more specific.
Example:
a.selector { color: blue }
.selector { color: red }
The color will not be changed.
But
.selector { color: blue }
a.selector { color: red }
will change the color to red, because the combination of TAG and class selector you are more specific.
Your declarations are being applied based on how specific they are.
Per MDN - Specificity:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
The link above also goes into the factors that determine specificity:
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)
CSS chooses which rules to apply based on a few conditions. Given rules applying to the same element, they are regarded in the following order:
1. !important
span { color: red; } /* base */
#mySpan { color: blue; } /* specific */
span { color: green !important; } /* important */
<span id="mySpan" style="color: purple;">Example</span>
2. Inline styles
span { color: red; } /* base */
#mySpan { color: blue; } /* specific */
<span id="mySpan" style="color: purple;">Example</span>
3. Specificity
span { color: red; } /* base */
#mySpan { color: blue; } /* specific */
<span id="mySpan">Example</span>
4. Last declared
span { color: red; } /* base */
span { color: yellow; } /* last applied */
<span>Example</span>
It's generally best to avoid using !important wherever possible. If you throw them around carelessly, there may come a time when you actually need to override one, but you've already used your highest order of precedence.
You have something called CSS specificity:
https://www.w3schools.com/css/css_specificity.asp
A really great read on what comes first and the order of specificity: check https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
Be aware, it's a loooong article. Most people don't even have the slightest idea of how far this goes.
Simply put: If two CSS selectors apply to the same element, the one
with higher specificity wins.
That's why I follow the BEM methodology, this prevents these kinds of hassles.
I have been searching the web to try and find an answer to my question but cant seem to find a direct answer. I use article classes a lot in my work, however never really needed to know whether they load in order i.e what comes first on the page.
Example
<div id="example" article class="example1 example2 example3">
Here's the div.
</div>
Additionally I would like to ask, if I set a background in example 1 and set a background in example two, would the background of example 1 be there underneath example two. I guess I am asking if it would be like stacking divs on top of one another.
The reason I ask is because I have an article class with a background of an ajax loader. However I need to load an image directly ontop of the ajax loader. Its my idea of making a budget preloader without all the scripting hastle.
Thanks again!
What you're asking about is the order of precedence of applying CSS rules. Simplified:
It does not matter in which order you specify the classes on an element (class="foo bar baz").
It does matter in which order you write the CSS declarations in your CSS file.
foo { ... }
bar { ... }
baz { ... }
Later rules override earlier rules.
You are applying properties specified in these CSS rules to an element. An element can only have one such property, they do not "stack". If two CSS rules specify the same property, later rules overwrite that property on the element.
Example:
<div class="baz bar foo">
.foo {
color: blue;
border: 1px solid green;
}
.bar {
color: black;
border-color: orange;
}
.baz {
color: red;
margin: 10em;
}
Again, the order of the classes in the class="..." attribute is irrelevant. All three classes are applied to the element. First, .foo, then .bar, then .baz. The element will have the following properties, which are the result of merging the above rules:
color: red; # from .baz
border-color: orange; # from .bar
border-style: solid; # from .foo
border-width: 1px; # from .foo
margin: 10em; # from .baz
(Note that rule precedence is actually a little more complex than that and actually depends on the specificity of the selector, but the above goes for equally specific selectors.)
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;
}
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
}