is there a possibility to select just a single last <li> in each multi-level list?
<ul class="root">
<li>no</li>
<li>no</li>
<li>yes</li>
</ul>
<ul class="root">
<li>no</li>
<li>no</li>
<li>
<ul>
<li>no</li>
<li>yes</li>
</ul>
</li>
</ul>
Free playground on jsfiddle:
http://jsfiddle.net/dizzyn/KMY3U/
Yes you can, use :last-child CSS selector..
My fiddle
CSS
ul li:last-child {
color: #ff0000;
}
li {
color: #000000;
}
You can also use this :
CSS
ul li:nth-last-child(1) {
color: #ff0000;
}
li {
color: #000000;
}
:last-child selector selects every element that is the last child of its parent.
Note : This was a CSS3 implementation, so some browser's will ignore this but wont spoil anything cuz you are just changing the color..
Related
I want to change the color of first anchor inside the ul element that has a text Parent 1
Here is my html
<ul class="Active">
<li>
<a>Parent 1</a>
<ul>
<li><a>Child 1.1</a></li>
<li><a>Child 1.2</a></li>
<li><a>Child 1.3</a></li>
<li> <a>Child 1.4</a></li>
</ul>
</li>
</ul>
Here is my css
.Active a:first-of-type{
color:red;
}
Fiddle
To get the first of type for the direct descendent of the parent ul, try this:
.Active > li:first-of-type > a {
color: red;
}
The > selector will target direct children only, not "grandchildren", so its it targeting the first li element that is a direct descendent of .Active, and then getting the any a element that is a direct child of it.(first-of-type will apply the color only to the first li, just in case it may have more children in your actual code).
.Active > li:first-of-type > a {
color: red;
}
<ul class="Active">
<li>
<a>Parent 1</a>
<ul>
<li><a>Child 1.1</a></li>
<li><a>Child 1.2</a></li>
<li><a>Child 1.3</a></li>
<li> <a>Child 1.4</a></li>
</ul>
</li>
</ul>
Only on root level:
.Active > li > a {
color: red;
}
Use this. Also try to start your class names with lower-case letters. It's better practice.
.Active li ul li:first-child a {
color:red;
}
You can use :first-child selector to accomplish this.
.Active ul > :first-child {
color:red;
}
<ul class="Active">
<li>
<a>Parent 1</a>
<ul>
<li><a>Child 1.1</a></li>
<li><a>Child 1.2</a></li>
<li><a>Child 1.3</a></li>
<li> <a>Child 1.4</a></li>
</ul>
</li>
</ul>
Hope it Helps. Cheers!
I have a menu consisting of nested ULs and LIs, eg:
.wrapper > ul:first-child > li:last-child {
color: red;
}
<div class="wrapper">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li>Style me!
<ul>
<li>Lorem</li>
<li>Don't style me!</li>
</ul>
</li>
</ul>
</div>
I want to add a style to the last <li> of the first <ul>, but not have it's children (the nested <ul>) inherit it.
I have tried:
.wrapper > ul:first-child > li:last-child {/*styles*/}
but this still styles the last element.
Would anyone know how I can target just that 1 element (with just CSS)?
Some CSS properties are inherited and you can't prevent that.
Inheritance propagates property values from parent elements to their children.
Some properties are inherited properties, as defined in their
property definition table. This means that, unless the cascade results
in a value, the value will be determined by inheritance.
However, you can override that by selecting the children and restoring the desired value.
.wrapper > ul:first-child > li:last-child {
color: red;
}
.wrapper > ul:first-child > li:last-child > * {
color: initial;
}
<div class="wrapper">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li>Style me!
<ul>
<li>Lorem</li>
<li>Don't style me!</li>
</ul>
</li>
</ul>
</div>
UPDATE: The fiddle link I posted has the working code now. :not(:last-child) and :nth-last-child(n + 2) both work perfectly.
I'm trying to use the nth-child or nth-last-child selector to select every li in a ul except for the last one. The catch is, the length of the list can vary from 1 to 5 elements. I haven't been able to find any documentation or examples of how to accomplish this.
Here is the HTML for the ul:
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
Here is my current code:
ul > li:nth-last-child(-1n+4) > a:hover {
color: red;
}
This code still selects the last element in the list. I've also tried the code below, but that doesn't select anything. I tried a number of other combinations as well, but they either didn't work at all or selected the last element.
ul > li:nth-child(1):nth-last-child(2) > a:hover {
color: red;
}
Here is a fiddle.
Use :not(:last-child) to target all except the last.
http://jsfiddle.net/96nd71e3/1/
Use :nth-last-of-type or :nth-last-child
http://jsfiddle.net/t0k8gp4d/
li:nth-last-of-type(n + 2) a {
color: red;
}
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
You can use this
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
CSS
ul > li{
background:red;
}
ul > li:last-child{
background:black;
}
But if you absolutely need to change their style outside of the main li element use this
ul > li{
background:black;
}
ul > li:not:last-child{
background:red;
}
I'm attempting to get a CSS style to apply to the top list item but can't get the rules to apply in the desired fashion. In the example below I'm trying to remove the top border for the very first li item. It works if I put style="border-top: none;" inline on the locationMenuTopItem element but I need to do it with a style block.
Why is the #locationMenu li block overruling the #locationMenuTopItem block?
<html>
<head>
<style>
#locationMenu li {
border-top: 1px solid #e1e1e1;
}
#locationMenuTopItem {
border-top: none;
}
</style>
</head>
<body>
<ul id="locationMenu">
<li id="locationMenuTopItem">Top Menu
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Top Menu 2</li>
<li>Top Menu 3</li>
</ul>
</body>
Why is the "#locationMenu li" block overruling the #locationMenuTopItem block?
It is more specific
#locationMenu > li:first-child
should do the job without having to add additional ids. (Although not in IE6)
This could be a possible answer:
#locationMenu li,
#locationMenu li:first-child ul li
{
border-top: 1px solid #e1e1e1;
}
#locationMenu li:first-child
{
border-top:none;
}
It is overrulie, because the #locationMenu li is deeper than #locationMenuTopItem alone. The more statements in a row, the deeper it is.
Because of CSS specificity - the selector #locationMenu li is more specific than #locationMenuTopItem. Using #locationMenu #locationMenuTopItem will work here.
Here's a graphical guide from Andy Clarke that will help: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
I have match listings dynamically generated. After each member I display a li that displays VS within it. However the very last ul li in the div match shouldnt be visible. Any ideas how I can do that?
HTML
<style>
.match {
}
.match ul {
}
.match ul li {
float: left;
margin-right: 50px;
}
.match ul li:last-child {
display: none;
}
</style>
<div class="content">
<div class="match">
<ul>
<li>Wade Barrett</li>
<li style="">VS</li>
</ul>
<ul>
<li>Shaemus</li>
<li style="">VS</li>
</ul>
<ul>
<li>Randy Orton</li>
<li style="">VS</li>
</ul>
<ul>
<li>John Cena</li>
<li style="">VS</li>
</ul>
<ul>
<li>Edge</li>
<li style="">VS</li>
</ul>
<ul>
<li>Chris Jericho</li>
<li style="">VS</li>
</ul>
<p class="clear"></p>
</div>
</div>
The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.
You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.
Change
<li style="">VS</li>
to
<li class="vs">VS</li>
And use this instead of your current :last-child selector:
.match ul:last-child li.vs {
display: none;
}
What browser are you using, IE does not support it. The latest version of the other browsers do, but I would recommend placing a class on it to make it 100%.