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.
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 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 am using jquery to insert html I get from the server into a div. Based on the div contents i'd like to adjust the syle of the container. I wrote up a simple html test. How do I tell css to apply this site when it has X child? After googling I tried :has and :contains with neither working. I don't want to keep my styles in JS as css makes more sense.
Demo: http://jsfiddle.net/wd9fk/
html
<div id="a"><div id="b">B</div></div>
<div id="a"><div id="c">C</div></div>
css
#a { height: 400px; border: 1px solid red; }
#b { height: 200px; }
#a :has #b { height: 300px; border: 1px solid blue; }
You simply cannot traverse up the DOM in CSS. You will need to use JavaScript.
Here is an article explaining why: http://snook.ca/archives/html_and_css/css-parent-selectors
Long story short, it's due to the way CSS is read by the browser, and by introducing it, it would increase the performance hit by a factor of ten (at least!), because it would need to read every single node multiple times to see whether or not it fits the profile.
It's a nice thought, but it's simply not viable.
There is no parent selector for CSS yet, there are plans and it is being discussed though. In CSS Selectors level 4, a subject selector has been proposed, which would let you refer to elements this way:
ol! > li:only-child
Which then reads: “an ol element that contains a single li element” (this syntax is a proposal though), and would let you style the parent ol element.
If this proposal succeeds, subject selectors would be available in the next version of CSS selectors.
For now, Javascript is the way to go, until the subject selector becomes a standard.
You cannot traverse up the DOM to get the parent selector of current matching elements.
But you can do it with jQuery quite easy like this:
$('#Default a span.active').closest('.vehicle_details').css('background-color','#444');
Fiddle Demo
#a > #b { height: 300px; border: 1px solid blue; }
Not sure if this is what you wanted, but give it a try.
Regards.
I thought I had my CSS down fairly well but I cannot seem to figure out why this problem occurs. I must be doing something wrong.
So if I want to select multiple elements that are children to a div I could write:
#mydiv > input, label{
}
Am I correct? I thought this to be true until I realized that other inputs and labels in my site were inheriting these CSS properties even though they were not in the div called #mydiv. To fix the issue I had to use:
#mydiv > input, #mydiv > label {
}
But I am pretty sure that this is not the quickest way to do so. I tried checking the Selector Page on W3.org but they do not give an example for my situation.
What am I doing wrong?
Am I correct?
No. The grouping selector (comma) has the lowest precedence, so you cannot use it to select multiple elements that are children of a div using this selector:
#mydiv > input, label
The most concise selector is the one that you found on your own:
#mydiv > input, #mydiv > label
You can DRY things up a bit using nested rules in LESS or Sass, though that does introduce a dependency in your code and/or build process.
Your second snippet is the simplest way to do it with pure CSS. The comma , separates isolated CSS selectors, so that's why you needed to begin each with #mydiv for both selectors.
You could use something like LESS, which would allow nested rules. Non-germane example:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
But you're probably better off with pure CSS.
Your second method is good
#mydiv > input, #mydiv > label {
}
If you wanted to somehow do this without using multiple selectors separated by a comma, you could use a class name for both your input and label elements
.your-class-name {
}
or if for some reason input and label were the only two types of child elements for #mydiv, then you could use the universal selector like this:
#mydiv > * {
}
Hey SO, I am a bit rusty with my CSS, so bear with me :)
I am working with a layout that has a border-bottom property for h2,h3,h4,h5,h6. One of my pages uses h3 to display titles for a FAQ listing, and it has an anchor tag since there is an expand/contract script active (click title, FAQ appears below title). I do not want these particular h3 elements to have the border. Is there a particular CSS syntax that I can use to achieve this? maybe something like:
#content a,h3 {
border-bottom:none;
}
This is obviously wrong since it will just clear any bottom borders for any a/h3 elements that reside in my content container.
thanks!
Clarification:
<h3>Text</h3>
There's no CSS selector that will select elements based on their parent. The best solution is to give the FAQ container an ID or class and then:
#faq h3 {
border-bottom: none;
}
The following is a demonstration of what each css-selector would match to. Note that it is not acceptable by web-standards to place h3's within a's.
a h3 { styles }
<h3>Hello</h3>
h3 a { styles }
<h3>Hello</h3>
Use this instead :
h3>a { text-decoration: none; }
Doing so you target every 'a' childs of 'h3'
Prefer the use of classes and tags selectors versus ids the most you can, as targeting ids tend to make your css code less flexible and extensible. Think inheritance as in OOP.
For further reading and complete coverage of the CSS selectors you can refer to :
http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors
Cheers
#content a>h3 { border-bottom:none; }
should do it. The > means 'next tag must be'.
#content a h3 { border-bottom:none; }
would probably work too.
You use the comma for multiple rules e.g
h1, h2, h3 {
color: red;
}
For red h1 to h3