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/
Related
I'm trying setting up two simple css classes to toggle elements :
.hide{
display:none;
}
.show{
display:inherit;
}
It seems to work but sometimes display:inherit; return troubles so which is the exact opposite of display:none; ?
This all depends on the element you are specifying. For example <div> and <p> elements are display:block; by default, whereas <span> is display:inline; by default.
The accepted answer here provides a list of the defaults for each element based on what browser is being used.
EDIT
It appears that display: initial; will work in most browsers, although not IE. A fallback line of CSS would probably be best practice:
.show {
display: block;
display: initial;
}
If you use Javascript to do that:
document.getElementById(id).style.display = "";
And
document.getElementById(id).style.display = "none";
Can toggle the display for you.
If you are just toggling elements, you don't need two classes; you just need one class ("hide") that you add and remove for each element. When you hide the element, you add class "hide" to it, and when you show the element again, you remove class "hide".
However, if you really need two classes, I've had success with something like this:
.show{display:"";}
The blank value tells the browser to ignore that property, and it goes back to its default value.
It depends on which element you want to show, for block elements:
.show{
display: block;
}
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 the following:
<a class="folder"><span>Background</span></a>
and the following CSS:
ul.arbo li > a:hover span,
ul.arbo li > a.current span {
background: #999999;
}
How can I modify the CSS so it does NOT apply if the link has a class of folder. In other words so it will not apply for the above HTML
You can do in css with negation pseudo-class selector :not , as follows:
:not(.folder) {
}
See working demo (provided by insertusernamehere).
CSS3 has the :not() selector, which you can add to your CSS (or you could do this with jQuery, either way). Mind you, this will only work in newer browsers.
http://www.w3schools.com/cssref/sel_not.asp
:not(.folder)
In your instance:
ul.arbo li > a:not(.folder):hover span,
ul.arbo li > a:not(.folder).current span { }
You don't need JavaScript or jQuery for this, and you can do it without CSS3 too (which may be relevant depending on what browsers you plan on supporting).
Just add another rule to prevent the background from changing on certain elements, like this:
ul.arbo li > a.folder:hover span
{
background: inherit;
}
Working example.
:not(.folder) {
}
Is a good solutions.Don't forget to check what browser do you want too work!
:not selector is a CSS3 selector and not all the browser support it...for example IE8 and earlier do not support the :not selector.
#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.
I'm using the following css to alternate the background colour of li elements, but need the css to be maintained if the rows get the .hidden class assigned to them (.hidden class being display: none;).
ul li:not(.hidden):nth-child(odd) {
background: #fff;
}
ul li:not(.hidden):nth-child(even) {
background: #f4f4f4;
}
Any ideas on how to keep the alternating colours while adding / removing li elements to / from the ul? Please only give a CSS based solution if possible. I may have to do it in JS but would prefer not to!
Cheers
Due to the way the :not() pseudo-class works, you cannot use it to filter elements out of the DOM to obtain a subset of elements on which to apply styles. See this answer for the nitty gritty.
EDIT: Apparently my solution below isn't supposed to work either. I need to take a break from answering questions or something. So I guess the only other feasible route may be to do this with JavaScript. I'm keeping this post here instead of deleting as I don't want to take the comments down with it.
To this end, if you can modify the HTML, you can instead use a class that is common to all your lis and target that instead, in conjunction with :nth-of-type():
ul li.shown:nth-of-type(odd) {
background: #fff;
}
ul li.shown:nth-of-type(even) {
background: #f4f4f4;
}
What if you changed your .hidden to the following
.hidden {height:0px; overflow:hidden}
I haven't tested this code at all, but the elements would still be in the DOM for manipulation yet shouldn't be visible to the user.