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?
Related
I can't figure out why this won't work. I happen to be using bootstrap as well.
<h1 class="montserrat_text" id="header_title">title</h1>
In the css file .montserrat_text works and the font of the h1 is the correct font.
But when I add #header_title to the css:
#header_title
{
color: red;
font-size: 60px;
}
Nothing happens and the text won't change size or color.
Thanks
The reasons the font color doesn't change was mentioned by #MohammadUsman already - there is no CSS property called font-color, what you want is named color.
The reasons the font-size doesn't change either (even though the property name is correct) could be that your browser ignores rules that follow illegal rules.
For change the color of text you must use color instead of font-color.
According to CSS priority if a selector contain the parents name , this selector has priority for effect than selector that does not contain it.
You must use parent name in selector like :
{# or .}parent #header_title
{
color: red;
font-size: 60px !important;
}
or you can use !important :
#header_title
{
color: red;
font-size: 60px !important;
}
As #Mohammed Usman said, it's color, not font-color.
Also, since you're using Bootstrap, it's possible something is overriding your CSS so you can add the !important tag to ensure that your CSS is used, as so:
#header_title {
color: red !important;
font-size: 60px !important;
}
I'm trying to change a color in div class bwg_back_0 through a CSS on webpage.
I'm trying something like this to adress it:
#bwg_container1_0 {
color: #5fa5aa !important;
}
or
#bwg_container2_0 .bwg_back_0 {
color: #5fa5aa !important;
}
What is wrong in this css?
Looks like you are having another style block at index line: 2421 that overrided your css.
You could try the following block that will have larger priority in browser (with an extra modifier, div in this case)
#bwg_container2_0 div.bwg_back_0 {
color: #5fa5aa !important;
}
read more on: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
try this way
#bwg_container1_0 #bwg_container2_0 .bwg_back_0 {
color: #5fa5aa !important;
}
Woohoo!! I got it :D
div#bwg_container1_0 #bwg_container2_0 .bwg_back_0 {
color: #5fa5aa !important;
}
I Add only div at start. It prioritize this css. Thx for this link: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity :)
This is my css file, till now I have made a simple navigation bar.
But the point is for my <a> elements in the navigation bar, when I try to style them both in case a and a:hover they work only when I give !important. What is happening. Is there a specificity issue ?
#import url('http://fonts.googleapis.com/css?family=Lato');
.navbar {
background-color: #b6b5b4;
border-style: solid;
}
.container {
background-color: #bfbfbf;
}
body {
font-family: Lato;
}
a {
color: black !important;
font-weight: bold;
}
.navbar-right {
background-color: #aeaeae;
}
a:hover {
background-color: #dfdfdf !important;
}
I am new to css and html.
You imported Bootstrap, which has default CSS styling. What you're basically doing, is trying to overwrite those styles. However, Bootstrap seems to be taking precedence over your CSS (probably due to the order of the imports in your HTML file), thus requiring !important. The !important tag makes sure that, that particular style cannot be overwritten or, is always displayed over others.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
If your ordering is like this, Bootstrap styling will be displayed, unless you use !important.
What is happening is parent divs like .container (may be, dont have your html structure) is having background-color css. This css will override the hover css on child <a> element. !important keyword is made only for this purpose. It does not allow other styles to override itself. Thats why you should use !important keyword in such cases.
a:hover { background: #dfdfdf !important;}
use this one
You have default css file with styles with its nesting! quick fix for this issue: assign class for <a> with your styles!
a.my-class {
color: black;
font-weight: bold;
}
a.my-class:hover {
background-color: #dfdfdf;
}
Yes, If u give like this
a {
background-color: black !important;
}
!important overrides the hover state styles also.
a {
background-color: dfdfdf;
}
doesn't work.
give your style like this
a {
background-color: black;
}
//remove !important
remove !important from <a> tag. Hover state works normally.
Let me know if u get any errors.
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
}