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?
Related
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;
}
We have horizontal 1st level and 2nd level navigations. When a 1st level li is hovered over, a second level ul is displayed horizontally above the first level ul.
How do we make the second level ul remain visible when the mouse leaves the first level li? Is this possible with CSS only..??
Here's the CSS:
ul.ebene1{display:inline;}
ul.ebene1 li{display:inline; list-style-type:none; margin-right:2%;}
ul.ebene2{display:none;}
ul.ebene1 li:hover ul.ebene2{display:block; position:fixed; bottom:6%; width:80%; font-size:0.9em;}
And the HTML:
<ul class="ebene1">
<li>NAV1
<ul class="ebene2">
<li>Nav2</li>
<li>Nav2</li>
</ul>
</li>
<li>NAV1</li>
<li>NAV1
<ul class="ebene2">
<li>Nav2</li>
<li>Nav2</li>
</ul>
</li>
<li>NAV1</li>
</ul>
You can't do that with only CSS. The :hover pseudo classes is triggered when you hover the element. So when leaving the element stops the hover effect.
You could use JQuery to show the submenu.
[EDIT]
A Jquery solution would be this:
HTML
<ul class="ebene1">
<li>NAV1
<ul class="ebene2">
<li>Nav1.1</li>
<li>Nav1.2</li>
</ul>
</li>
<li>NAV2</li>
<li>NAV3
<ul class="ebene2">
<li>Nav3.1</li>
<li>Nav3.2</li>
</ul>
</li>
<li>NAV4</li>
</ul>
CSS
ul.ebene1 {
display:inline;
}
ul.ebene1 li {
display:inline;
list-style-type:none;
margin-right:2%;
}
.ebene2 {
display:none;
position:fixed;
bottom:6%;
width:80%;
font-size:0.9em;
}
JQuery
(".ebene1 li").mouseover( function() {
if( $(this).children('ul').length > 0 ) // check if a ul exists in the li
{
$('.ebene2').hide(); // hide all submenus
$(this).find('ul').show(); // show this submenu
}
});
And a DEMO.
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 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%.