#iddiv span {
display: inline-block;
width: 190px;
}
.myclass {
width:10px;
}
Then I have
<div id="iddiv">
<span>hello:</span>
<span class="myclass">yeah</span> <br/>
</div>
I would like the first span's width to be 190px, and second's to be 10px. But both are 190px: why it's not overriding the width propoerty?
EDIT: Thanks for your responses. What about unsetting width? I don't want 10px width, just default width as if it was undefined
You could always use the !important flag to override:
.myclass {
width: 10px !important;
}
Because id+selector (#iddiv span) is more specific than a class. Either
#iddiv span.myclass
or
#iddiv .myclass
should work for this case.
Learn more about CSS specificity here or by Googling it.
CSS applies styles according to the specificity of the selectors
#iddiv span is more specific than myclass. Changing it to #iddiv .myclass should fix the issue for you.
Here's an article that goes more in depth about this : http://htmldog.com/guides/cssadvanced/specificity/
Remember to use the keyword, !important, which functions to overwrite parent rules.
Also you can define your "myclass" in the following way:
#iddiv span.myclass {
width:10px;
}
It's not working because the first style is more specific.
To fix it, make sure you target the second span more directly, like this
#iddiv span.myclass
http://jsfiddle.net/jasongennaro/5fe9A/
First of all, I'd suggest you properly target your selectors, as others are suggesting.
But when all else fails, you can use !important.
Related
I have created a custom style sheet that overrides the original CSS for my Wordpress template. However, on my calendar page, the original CSS has the height of each table cell set with the !important declaration:
td {height: 100px !important}
Is there some way I can override this?
Overriding the !important modifier
Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
Some examples with a higher specificity (first is highest/overrides, third is lowest):
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Or add the same selector after the existing one:
td {height: 50px !important;}
Disclaimer:
It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.
But, it's useful to know how to override it, if you sometimes have to.
Apart from overriding a style set by the style attribute, the !important should only be used when you have selectors in your style sheet with conflicting specificity.
But even when you have conflicting specificity, it is better to create a more specific selector for the exception. In your case it's better to have a class in your HTML which you can use to create a more specific selector which doesn't need the !important rule.
td.a-semantic-class-name { height: 100px; }
I personally never use !important in my style sheets. Remember that the C in CSS is for cascading. Using !important will break this.
Disclaimer: Avoid !important at all cost.
This is a dirty, dirty hack, but you can override an !important, without an !important, by using an (infinitely looping or very long lasting) animation on the property you're trying to override the importants on.
#keyframes forceYellow {
from {
background-color: yellow;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
margin: 0 auto;
background: red !important;
animation: 1s linear infinite forceYellow;
}
<div></div>
Every part of the styles name has a weight, so the more elements you have that relate to that style the more important it is. For example
#P1 .Page {height:100px;}
is more important than:
.Page {height:100px;}
So when using important, ideally this should only ever be used, when really really needed. So to override the declaration, make the style more specific, but also with an override. See below:
td {width:100px !important;}
table tr td .override {width:150px !important;}
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Worked for me.
This can help too
td[style] {height: 50px !important;}
This will override any inline style
In any case, you can override height with max-height.
You can use higher specificity by going up in selectors.
td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}
I wrote a detailed article on how to override CSS here.
I found really cool trick with :not.
If nothing from above helped you, then try this:
.page-width:not(.anything) {
}
If you're trying to override an !important tag that is defined in a class. Simply specify your property in a id tag. id has higher precedence than class.
There are a couple of modern approaches that weren't available when this question was first asked.
Use :is() to set an arbitrarily high specificity to your selector
:is(td, #A#A#A:not(*)) {height: 200px !important}
The second parameter to the :is() sets the specificity of the whole selector but the :not(*) part means that the parameter will never match any element itself. #A#A#A gives a specificity of (3,0,0) but you can safely choose whatever selector is sufficient to override the other !important setting. However, this is still something of a hack.
A better way is to use cascade layers. Layered !important declarations override non-layered !important declarations so you can just do:
#layer {
td {height: 200px !important}
}
By using named layers you can further override this to arbitrary levels.
Note that neither approach will allow you to override a !important setting in an HTML style attribute.
I would like to add an answer to this that hasn't been mentioned, as I have tried all of the above to no avail. My specific situation is that I am using semantic-ui, which has built in !important attributes on elements (extremely annoying). I tried everything to override it, only in the end did one thing work (using jquery). It is as follows:
$('.active').css('cssText', 'border-radius: 0px !important');
I was just playing around with CSS and noticed an interesting scenario for which I couldn't really find an explanation. Maybe some of you have the answer for this.
I have a div element with an inline styling
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
My CSS
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible
}
Here the hover effect is not applying. That is, the overflow: visible rule is not taking.
Note: Moving the overflow:hidden from inline style will fix the issue.
I'm looking for the reason why hover effect is not applying. Can anyone explain this scenario?
All else being equal, inline styles take precedence over styles applied via stylesheet rules. In your case, when hovering, the overflow: visible is invoked via the stylesheet rule, but that cannot override the inline style. If necessary, you could try !important.
#text-sample {
width: 200px;
white-space: nowrap;
}
#text-sample:hover {
overflow: visible !important;
}
<div id="text-sample" style="overflow:hidden;">
This is a sample text to test the CSS behavior of inline styling
</div>
But it would be easier simply to specify overflow: hidden in the #text-sample stylesheet rule, instead of giving it inline.
Your inline style will always override your external CSS.
You can use !important in :hover
#text-sample {
width:200px;
white-space: nowrap;
}
#text-sample:hover {
overflow:visible!important;
}
Inline styles take precedence over style sheets. There are two ways to change that: using JavaScript or using !important in the style sheet.
#text-sample:hover {
overflow:visible !important;
}
In CSS, there's something called Specificity. Simply said, something like
#id { color: red; }
would take precedence over something like
.blue { color: red; }
when having something like <div id="id" class="blue">. See example below.
This is because an ID selector (#) is interpreted as more important than a class. In the same manner, an equally specific selector with a later declaration (later in the file) takes precedence and the more specific your selector gets, the more important it is.
For your example: An inline-style takes precedence over anything written in a CSS file (unless using !important). I believe the :hover does not change anything on that fact.
For the detailed rules look my link above.
div {
width:200px;
white-space: nowrap;
}
#text-sample:hover,
#sample-2:hover {
overflow:visible;
}
#sample-2 {
overflow: hidden;
}
#foo {
color: red;
}
.blue {
color: blue;
}
<div id="text-sample" style="overflow:hidden;">This is a sample text to test the CSS behavior of inline styling</div>
<div id="sample-2">This is a sample text to test the CSS behavior of inline styling</div>
<div id="foo" class="blue">foo</div>
EDIT
As mentioned in comments, Specificity does not apply to inline styles. Nevertheless, inline styles are taking precedence over anything in a CSS declarations in files. However, as soon as you move the rule into the same CSS file (as you mentioned will work), the :hover is more important than the other rule since it is more specific in the moment you're hovering.
I have this in my print CSS:
.foo
{
display: none;
}
.bar
{
display: none;
}
All class="foo" elements are hidden, but all class="bar" elements are still visible. What could be the cause of this?
CSS specificity could be overruling your print CSS rules. The simplest way to resolve this is to add !important to your rules. While generally this should be avoided, it's fine to use it in a print CSS.
.bar
{
display: none !important;
}
The other way is to make sure your print CSS rules come out on top in the specificity calculation. The exact way to do this depends entirely on your regular CSS rules.
I have several divs. One of them has class="active". I want all the divs to be hidden (display:none;) except the one with .active. What should the selector be?
Have you tried?
div { display: none; }
div.active { display: block; }
PS. I'll add explanation. When you specify a class in a selector it has higher priority in cascading logic (because of its higher specificity) than just a single div (because single div is more generic, wider). So there is no need to use !important or stuff like that.
div:not(.active){
display: none;
}
Try the :not pseudo-class.
For example:
div:not(.active) {display:none;}
As Paul commented below, this selector is not supported in IE8 and below. But considering you included the CSS3 tag and specifically asked for a selector, that might not be an issue. For a cross-browser solution, see #mkdotam answer.
use !important in with css, something like that:
.active {
display: block !important;
}
and example: http://jsfiddle.net/hNLen/
I have created a custom style sheet that overrides the original CSS for my Wordpress template. However, on my calendar page, the original CSS has the height of each table cell set with the !important declaration:
td {height: 100px !important}
Is there some way I can override this?
Overriding the !important modifier
Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
Some examples with a higher specificity (first is highest/overrides, third is lowest):
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Or add the same selector after the existing one:
td {height: 50px !important;}
Disclaimer:
It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.
But, it's useful to know how to override it, if you sometimes have to.
Apart from overriding a style set by the style attribute, the !important should only be used when you have selectors in your style sheet with conflicting specificity.
But even when you have conflicting specificity, it is better to create a more specific selector for the exception. In your case it's better to have a class in your HTML which you can use to create a more specific selector which doesn't need the !important rule.
td.a-semantic-class-name { height: 100px; }
I personally never use !important in my style sheets. Remember that the C in CSS is for cascading. Using !important will break this.
Disclaimer: Avoid !important at all cost.
This is a dirty, dirty hack, but you can override an !important, without an !important, by using an (infinitely looping or very long lasting) animation on the property you're trying to override the importants on.
#keyframes forceYellow {
from {
background-color: yellow;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
margin: 0 auto;
background: red !important;
animation: 1s linear infinite forceYellow;
}
<div></div>
Every part of the styles name has a weight, so the more elements you have that relate to that style the more important it is. For example
#P1 .Page {height:100px;}
is more important than:
.Page {height:100px;}
So when using important, ideally this should only ever be used, when really really needed. So to override the declaration, make the style more specific, but also with an override. See below:
td {width:100px !important;}
table tr td .override {width:150px !important;}
Override using JavaScript
$('.mytable td').attr('style', 'display: none !important');
Worked for me.
This can help too
td[style] {height: 50px !important;}
This will override any inline style
In any case, you can override height with max-height.
You can use higher specificity by going up in selectors.
td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}
I wrote a detailed article on how to override CSS here.
I found really cool trick with :not.
If nothing from above helped you, then try this:
.page-width:not(.anything) {
}
There are a couple of modern approaches that weren't available when this question was first asked.
Use :is() to set an arbitrarily high specificity to your selector
:is(td, #A#A#A:not(*)) {height: 200px !important}
The second parameter to the :is() sets the specificity of the whole selector but the :not(*) part means that the parameter will never match any element itself. #A#A#A gives a specificity of (3,0,0) but you can safely choose whatever selector is sufficient to override the other !important setting. However, this is still something of a hack.
A better way is to use cascade layers. Layered !important declarations override non-layered !important declarations so you can just do:
#layer {
td {height: 200px !important}
}
By using named layers you can further override this to arbitrary levels.
Note that neither approach will allow you to override a !important setting in an HTML style attribute.
If you're trying to override an !important tag that is defined in a class. Simply specify your property in a id tag. id has higher precedence than class.
I would like to add an answer to this that hasn't been mentioned, as I have tried all of the above to no avail. My specific situation is that I am using semantic-ui, which has built in !important attributes on elements (extremely annoying). I tried everything to override it, only in the end did one thing work (using jquery). It is as follows:
$('.active').css('cssText', 'border-radius: 0px !important');