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;
}
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!
How can I remove the underline bellow "-"? I only want the text to be underlined on Hover not the "-"
-- DEMO --
Many thanks!
HTML
<ul class="menu">
<li>
Commercial Property Management
<ul>
<li>
Industrial
</li>
<li>
Office
</li>
<li>
Retail
</li>
<li>
Shopping Centres
</li>
</ul>
</li>
<li>
Mixed-Use Residential Property Management
</li>
</ul>
CSS
ul.menu li li a:before {
content: "-";
margin-right: 8px;
}
Edit 4 years later: This answer is pretty much a low-quality duplicate of https://stackoverflow.com/a/8820459/3285730. I'd recommend going there and getting an actual explanation.
Try giving it display:inline-block;:
ul.menu li li a:before {
content: "-";
margin-right: 8px;
display:inline-block;
}
JSFiddle Demo
content of the :before selector is counted to the a-tag as it creates a pseudo-element within the element.
Add display:inline-block; to the definition to solve this issue.
Given the following HTML, what CSS rule would select and ONLY select the line that says TWO?
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one</a>
<ul class="sub-menu">
<li class="active"><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
The following selector doesn't work:
.active:last-of-type {...}
Also, I must clarify that if there is no sub-menu or rather the link in the sub-menu is NOT active, then the parent menu must be selected by the same rule. In other words, given the following HTML, the same rule would highlight the line that says ONE:
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one</a>
<ul class="sub-menu">
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
No single selector statement will match both of your use cases (not until parent selectors are supported, anyway). You would have to include, for example, an additional class in one of those use cases in order to fulfill your requirements without your selector matching all .active elements.
Assuming the following use cases:
Active sub-menu element
<ul class="menu">
<li class="active"><a>one</a></li>
<li>
<ul class="sub-menu">
<li class="active"><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
No active sub-menu element
<ul class="menu no-active-sub-menu">
<li class="active"><a>one</a></li>
<li>
<ul class="sub-menu">
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
The following selectors would work:
.menu .sub-menu > .active,
.menu.no-active-sub-menu > .active {
...
}
ul > ul > li:first-child
but you should nest the child UL inside the li in which case:
ul > li > ul > li:first-child
You can use this
ul ul .active {...}
Going from the code provided
Just use :last-child
ul .active:last-child {
color: green;
}
As was suggested by one of the contributors, the parent required another class to set it apart from the child(ren) menu items for this to work. I am posting my solution in case others are faced with something similar.
This is the HTML when the parent is the active page:
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one (parent, active page)</a>
<ul class="sub-menu">
<li><a>two (child)</a></li>
<li><a>three (child)</a></li>
</ul>
</li>
</ul>
This is the HTML when a child menu item of the parent is the active page:
<ul class="menu">
<li><a>void</a></li>
<li class="active page-parent">
<a>one (parent)</a>
<ul class="sub-menu">
<li class="active"><a>two (child, active page)</a></li>
<li><a>three (child)</a></li>
</ul>
</li>
</ul>
These are the rules I used:
/* Highlights the parent and any child
menu item under the parent when the
parent is the active page. */
ul.menu li.active a {
color: red;
}
/* Keeps the children menu items normal
when the parent is the active page.
Also keeps the parent normal when a
child menu item is the active page. */
ul.menu li.active ul.sub-menu li a,
ul.menu li.active.page-parent a {
color: black;
}
/* Highlights the child menu item that
is active */
ul.menu li.active.page-parent ul.sub-menu li.active a {
color: red;
}
It definitely is straightforward once you identify the parent state with a unique rule when one of its children menu items is active. Obviously, this would be easier if the child items didn't inherit the "active" state from the parent, but the menu system I am using behaves as described here. Thanks to everyone for their contributions.
Note: I have not tested this with a menu containing more than 1 sub-menu level deep.
trying to select an adjacent's child element with CSS... not really sure how to
This is the HTML structure
<ul>
<li>
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
I want to say that there is a menu with multiple levels. When theres a UL existing within a LI then the needs to have a dropdown/expand icon... so I thought if I use the adjacent selector I can determine if this level has kids to expand and this is what I thought would work but didn't:
ul li a ~ ul .icon {
// doesnt work
}
ul li a .icon ~ ul {
// doesnt work
}
This works but I need to target the .icon
ul li a ~ ul {
// works
}
Cheers, Dom
Building upon my comment on your question. If you have control over how the HTML for the menu is generated, a workaround would be to add an extra class to each li-element that has a sub-menu. Like this:
<ul>
<li class="has-submenu">
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
Then you could use a selector like this:
.has-submenu .icon {
/* Do your stuff here */
}
ul is a child of li, not the anchor. So ul li ul .
If you want to select it as a sibling, then ul li a + ul
I have this list :
<ul class="topnav" id="topnav">
<li><span>community</span>
<ul class="level1">
<li><span>Commun1</span>
<ul class="level1">
</ul>
</li>
</ul>
</li>
<li><span>Events</span>
<ul class="level1">
<li><span>Event1</span>
<ul class="level1">
<li><span>Event2</span>
<ul class="level1"></ul>
</li>
</ul>
</li>
</ul>
</li> the the first ul under community and the first ul under Events
</ul>
I need to access only the first ul with the class level1 Im using In each ul I need to access only
.topnav li > ul
{
//code here
}
I've updated my code still can't access the only the fi
Use like this:
#topnav li:first-child ul
{
// your style
}
See the working demo : http://jsfiddle.net/bqBdn/4/
Note: Your HTML code is little bit buggy, So correct it as I did in this demo. Use proper tagging for ul, li inside main liThanks!
it works for me: jsfiddle demo
ul.topnav li > ul {
color:blue;
}
Try this:
#topnav li ul:first-child
from here
.topnav li > ul.level:first-child
will access only the first ul with a .level class at the first level after the li.
This is because your html is wrong. You can't have an <li /> as a child of another <li />. The browser is correcting the mistake - bringing all the <ul />'s under the initial one to the same level. Your css is working, your html is the problem.
Are you able to change this?