If a ul has li items with multiple classes, is it possible to get the last item of a specific class using :last-child?
For example, consider following:
<ul class="test">
<li class="one">
<li class="one">
<li class="one">
<li class="two">
<li class="two">
</ul>
I want to add some style to the last li having class "one" (ie. third in the list).
I tried following and it does not work.
ul.test li.one:last-child
That's not possible yet.
:last-child selects the last child, regardless of the tag name, etc.
The possible alternative, :last-of-type selects the last occurrence of a tag. It ignores the class name, etc.
Your only option is to add a specific class name to that element, or use JavaScript to add this class name.
Instead of giving class for each li, you can go for nth child where you can assign the style by li number.
If you want to give the separate css for your 3rd li then you need to write
li:nth-child(3) {
color: green;
}
You can do it using jquery: http://jsfiddle.net/surendraVsingh/HyAhL/2/
Jquery code:
var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last year.
how to specify CSS for an element without any grandchild elements? e.g.,
<div class="foo">
<ul></ul>
</div>
<div class="foo">
<ul><li></li></ul>
</div>
// hide the <div> whose child <ul> is empty, how?
div.foo {
display: none;
}
Hey there is :empty selector in css which allows you to do like this.
Javascript method to get what you asked for
But If you want to hide other things you should use javascript
:has is experimental
A simple way of doing this
let text = document.querySelector("div.foo > ul");
if(text.innerHTML == ""){
// set your things
document.querySelector("div.foo").style.display = "none";
// you can delete this thing too but this is just an examplee
}
using :empty selector
If you don't wanna use javascript then this method is also good
Simply use
div > ul:empty{
display:none; // or any styles that you can see
}
For just illustration purpose :
div.foo > ul{
background-color:blue;
height:30px;
}
div.foo > ul:empty{
display:none;
}
<!-- Below is empty ul -->
<div class="foo">
<ul></ul>
</div>
<!-- Below is non empty ul -->
<div class="foo">
<ul>
<li>This is with text</li>
</ul>
</div>
But be carefull
Empty elements are elements that have nothing in them. It cannot even have a whitespace.
There is something called :blank but it is experimental as far as I know.
I am trying to alter MediaWiki's hideous default color for visited links and keep the red color for new links. New links have class new or their parents have this class set. So I tried
:not(.new) a:not(.new) { color: #0074D9 !important; }
But as I inspected in the browser console, this rule overwrites li.new a - which it should not. Experimenting a bit,
li:not(.new) a:not(.new) keeps the red color for li.new a,
*:not(.new) a:not(.new) overwrites the red color
Can you explain this behavior and recommend a CSS rule forcing blue color for all links but the new ones?
:not(.new) will match every element that does not have a new class. So for example :not(.new) a in <li class="new"><span><a>...</a></span></li> will match span a. In general, :not() is rather hazardous to use without an accompanying specific class or id that you know won't be used elsewhere.
What you want is "a tags which do not have a .new ancestor" (as opposed to "a tags which have a non-.new ancestor"), which cannot be expressed as a CSS selector. Given you know that the .new element is the grandparent, you might be able to write something like :not(.new) > * > a instead.
set a color for li.new a and li a.new and then set a color for li:not(.new) a and li a:not(.new) .
If you want just the visited links to change color add :visited to the css selectors
ul li.new a, ul li a.new {
color:red
}
li:not(.new) a {
color:green
}
a:not(.new) {
color:green
}
<ul>
<li>
<a href="#" >Normal Link</a>
</li>
<li class='new'>
this will NOT be green because LI has class new
</li>
<li>
<a href="#" class='new'>this will NOT be green because it has class new</a>
</li>
<li>
<a href="#" >Normal Link</a>
</li>
</ul>
Im trying to get my hover selecting work properly.
Im having two classes in a li element.
It may have the class named disabled , or it may have a class called wait , or it may have both disabled and wait
I want this hover to only work on the li element with the class named wait, but only if disabled class is not on it.
How can i achieve this?
Current attempt:
.group li:.wait:not(.disabled):hover {
// do something
}
You had a : after your li, which signified that the following element in your query would be a pseudo-class. However, you just wanted a simple class selector: .wait.
.group li.wait:not(.disabled):hover {
color: red;
}
<ul class="group">
<li>None</li>
<li class="wait">Wait</li>
<li class="disabled">Disabled</li>
<li class="wait disabled">Wait and Disabled</li>
</ul>
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
div > p {
background-color: yellow;
}
doesn't appear to evaluate any differently than
div p {
background-color: yellow;
}
But would there be an effect I am unaware of? It seems that using the > is more proper style, at least.
There is a difference; > is "immediately follows". So your div > p would apply to the p here:
<div>
<p>Text here</p>
</div>
but not here:
<div>
<table>
<tr>
<td>
<p>Text here</p>
</td>
</tr>
</table>
</div>
A more detailed description can be found within the CSS specification for child selectors.
Look at this example it might help you ...
div#container > ul {
border: 1px solid black;
}
.......
<div id="container"> <ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li> </ul> </div>
A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator. In fact, it's recommended particularly when working with JavaScript-based CSS selector engines.
.......
Read this : http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
it will help you .
div > p selects the direct child p (only the sons),
div p selects all its children p, now matter how deep it is in the hierarchy (including the grandsons and great grandsons).
div>p
indicates a P which is a DIRECT child of div
div p
indicates a p that is descendent of div, not
Check Fiddle for example.
The > selector is used to select child elements of a particular elemnent.
Given the following html:
<ul class="nav">
<li class="level0">..</li>
<li class="level0">..</li>
<li class="level0 active">
Category Name
<ul class="level0">
<li class="level1 active">
Sub-category
<ul class="level1">
<li class="level2 active">
I only want this link styled
</li>
</ul>
</li>
</ul>
</li>
<li class="level0">..</li>
</ul>
How do I only style that nested link, considering that each parent li also has a class of 'active'? I thought I could use .nav .active:last-child > a which works in the above example, but removing the active class from that li.level2 you would expect then that the li.level1 above it would be styled, but it is not (see jsfiddle below for an example of this).
I may just be having a brainfart but I can't think of a way to target that element with only css. The only thing I can think of is to use javascript to remove the 'active' class from the parent elements, but I feel like there must be some other way.
Here is a more elaborate jsfiddle example that illustrates two test cases: http://jsfiddle.net/K4e37/
Is this possible without changing the markup and without using javascript?
Edit: I wasn't thinking about last-child correctly but here is an updated example which gets pretty close to what I want, just need to not style the higher level elements: http://jsfiddle.net/K4e37/2/
Based on other answers (here, here), the answer to your question is no. As summarized there, "last-of-type" does not work with classes and "last-child" does not work with the sub-nesting structure in your HTML. I think you'll have to change the markup or use Javascript.
List item
If you don't even have the 'level' classes, still you can target your specific html link with the below selector( if you only needs that specific link to be styled ). Please link if your requirement fulfills!
Usiong CSS:
ul.nav li ul li ul li.active a {
color: #FF0000;
}
Cheers :)