If I have a list:
<ul>
<li>item</li>
<li class="selected">item</li>
<li>item</li>
<li>item</li>
</ul>
Is it possible to select the 3rd and 4th items in this list via CSS? And more generally, all items that come after/before the .selected item?
To select the succeeding elements, you would use the general sibling combinator, ~.
Despite not being able to select the previous sibling elements, you could solve this by styling all the elements to begin with, and then overwriting the styling by selecting the succeeding elements.
EXAMPLE HERE
This will set the color of all the elements (except .selected) to red. It will then overwrite that styling and make the succeeding elements blue.
ul li:not(.selected) {
color:red;
}
ul .selected ~ li {
color:blue;
}
Since :not() isn't supported in IE8, you could also use the following:
EXAMPLE HERE
ul li {
color:red;
}
.selected {
color:black;
}
ul .selected ~ li {
color:blue;
}
There is a selector that matches elements preceded by another and this selector is a tilde ~.
So, you can simply match all elements after .selected using:
.selected ~ LI
JSFiddle example.
For futher details, visit spec.
Related
I have the following code in my wordpress theme:
<div class="BlaBla">
<ul>
<li>
<a>stuff to select</a>
</li>
<li>
<a>stuff to NOT select</a>
</li>
<\ul>
</div>
i have to select the first "a" tag to remove it (add the rule display: none) but i can't put id's or classes
i tried the following rules but select every things
div[class="BlaBla"] ul li a:first-child{
display:none;
}
div[class="BlaBla"] ul li:first-child{
display:none;
}
div[class="BlaBla"] > ul > li:first-child{
display:none;
}
you need to target the link inside the first list-item so the selector is
.BlaBla li:first-child a {
display: none;
}
About your attempted solutions:
the first one will target all the first links inside all the list-items
the second one will target the first list-item (and not the link inside the first list-item)
the last one uses the child combinator and, in your example, works exactly as in the second attempt.
This question already has answers here:
Is the CSS :not() selector supposed to work with distant descendants?
(2 answers)
Closed 7 years ago.
I try to select all lis in the page except whose are inside a container(ascendant) with class .foo
Output: The li 22 should not be colored.
I can't use direct descendants because there could be nested lis and uls.
It's not working because you haven't specified that it's that exact element that can't have the class. The ul element that contains the li element doesn't have that class, so that matches the :not(.foo) part of the selector.
Make sure that the :not(.foo) part applies only to the right element, for example by specifying exactly where the element is in relation to the list element:
:not(.foo) > ul > li { background: red; }
<ul>
<li>11</li>
</ul>
<div class="foo">
<ul>
<li>22</li>
</ul>
</div>
I guess css selectors are using an OR or ORELSE relation. So when you use a selector like :not(.foo) li something similar happens:
statement1: In first place it will check: is actual element's tagname is li? (true)
statement2_1:In second place it will check: is closest parents class not .foo? (true)
statement2_2:In next place it will check next parent: is next parent class not .foo (false)
Theoretically the following statement evaluates:
statement1 AND (statement2_1 ORELSE statement2_2)
true AND (true ORELSE false) => true AND true = > true
What if you just try other way:
li{
background-color: red;
}
.foo li{
background-color: initial;
}
<ul>
<li>11</li>
</ul>
<div class=foo>
<ul>
<li>22</li>
</ul>
</div>
I'm trying to apply a style to ONLY the very first child of an element. I'm using :first-child in the css to achieve this, but it looks like it's not the behaviour I'm looking for.
Take the following markup as example:
<ul class="myUl">
<ul class="mySubUl">
<li>foo0</li>
<li>foo1</li>
</ul>
<ul class="mySubUl">
<li>foo2</li>
<li>foo3</li>
</ul>
</ul>
======================
<ul class="myUl">
<li>foo0</li>
<li>foo1</li>
<ul class="mySubUl">
<li>foo2</li>
<li>foo3</li>
</ul>
</ul>
and this simple CSS:
ul.myUl li:first-child {
color: red;
}
Live fiddle: http://jsfiddle.net/bsSDh/1/
This applies not only to the first child of the ul.myUl elements, but also to the first child of ul.subUl. I would have expected this behaviour if the CSS selector was ul li:first-child (which works), but since I'm adding a class to the selector I'm expecting to apply that style only to the very first child.
Why does the style applies not only to the first child? Am I missing something about first-child specs or using the selector in the wrong way?
I think you need an additional child selector element like this:
ul.myUl > li:first-child {
color: red;
}
Example Fiddle
Your selector selects any <li> below ul.myUL, that is a first child. As this references only to the immediate parent and not any other ancestor, all those other <li> match as well.
EDIT
After your comment, I assume, that you will need a somehow complexer selector like this:
ul.myUl > li:first-child,
ul.myUl > ul:first-child > li:first-child {
color: red;
}
The selector
ul.myUl li:first-child
selects any li:first-child below any ul.myUl (i.e. first child of any parent inside the ul). Instead you might want to select a direct child via
ul.myUl > li:first-child
or even
ul.myUl > ul.subUl:first-child > li:first-child
Pay attention to the differences between the Child Combinator (a direct child) and the Descendant Combinator (any element contained).
You should use this two selectors to achieve the result wanted on the two known cases:
ul.myUl > ul:first-child > li:first-child {
color: red;
}
ul.myUl > li:first-child {
color: red;
}
Running Demo
I have a simple menu styled with css.
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
Is it possible to apply specific style to li element, containing a with active class.
I've tryed something like this:
#container > ul > li a.active < li {
custom: style;
}
Not possible with CSS. Though this can be achieved with scripting.
Similar question here.
Apply CSS styles to an element depending on its child elements
No, selectors can't match in reverse. In such circumstances the best approach is to simplify the matter.
A elements can be styled as block level elements, so simply push down whatever styles you had on the parent LI to the A elements. You already have your specific selector a.active, that should be distinct enough that you can style them appropriately.
#container ul li a.active{ yourstyle:styleproperties;}
or I think you may want to do like this
#container ul li a:active{ yourstyle:styleproperties;}
if you want dynamically add class to element you can use javascript and jquery
http://api.jquery.com/addClass/
$("#container ul li a").addClass("active");
and for parent(this class will be added for li element which is parent to a.active element)
$('#container ul li a.active').parent().addClass("active");
there is already similar topic Target outer div based on class of inner a
Try this:
ul li a.active{ color:green;}
http://jsfiddle.net/Vloxxity/VZgQx/
Edit:
i've read your comment,
this is only possible if you mark the li with a active class.
I have a structure:
<div id="div">
<ul class="ul">
<li class="li_one">
</li>
<li class="li_two">
</li>
</ul>
</div>
I want to set background:red to the second li element (class "li_two") using pseudo-selectors and want to begin from the most outer div. I'm trying to this way:
#div > ul:nth-child(1) { background:red; } // works but wrong, sets background to ul
#div ul:last-child { background:red; } // doesn't set to any element
#div ul:first-child { background:red; } // again sets to ul but not to li
#div [class=li_two] { background:red; } // only this one works fine
Is it possible to set style to li_two from #div using :nth-child or :last-child or :first-child selectors? How to do it?
#div li:last-child
Your 2nd option was almost right :) I think you misunderstood what last-child does. xx:last-child It doesn't select the last child element of element xx; it selects every xx element that is the last child of it's parent.
Some reading.
I've created a JSFiddle for you to test it
:nth-child() and the other pseudo-classes should be applied to the child elements, not the parent. Apply those pseudo-classes to the lis:
#div ul li:last-child {
background: red;
}