This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 2 years ago.
.nav-list :first-child :first-child{
font-weight:bold;
}
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>Home</li>
<li>About Us
<ul class="nav-dropdown">
<li>Our Story</li>
<li>Our Work</li>
<li>SWAG Leaders</li>
<li>In the News</li>
</ul>
</li>
<li>Calendar</li>
<li>Take Action
<ul class="nav-dropdown">
<li>Get Involved</li>
<li>Donate</li>
</ul>
</li>
<li>Resources</li>
</ul>
</nav>
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>Home</li>
<li>About Us
<ul class="nav-dropdown">
<li>Our Story</li>
<li>Our Work</li>
<li>SWAG Leaders</li>
<li>In the News</li>
</ul>
</li>
<li>Calendar</li>
<li>Take Action
<ul class="nav-dropdown">
<li>Get Involved</li>
<li>Donate</li>
</ul>
</li>
<li>Resources</li>
</ul>
</nav>
I have the nav menu below where I'm trying to target the following css:
.nav-list:first-child:first-child{
font-weight:bold;
}
I was hoping to turn 'Home' bold but nothing happens
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>Home</li>
<li>About Us
<ul class="nav-dropdown">
<li>Our Story</li>
<li>Our Work</li>
<li>SWAG Leaders</li>
<li>In the News</li>
</ul>
</li>
<li>Calendar</li>
<li>Take Action
<ul class="nav-dropdown">
<li>Get Involved</li>
<li>Donate</li>
</ul>
</li>
<li>Resources</li>
</ul>
</nav>
Here you go-
.nav-list > li:first-child > a:first-child{
font-weight:bold;
}
You specify the :first-child to the child element, and not the parent. Also, > selector selects the direct child(ren).
https://jsfiddle.net/cmxna7vg/
.nav-list > li:first-child{
font-weight:bold;
}
You need to specify that you want to search elements only at the first level of nesting by ">", and then specify that that element must be first child.
Related
In the website I'm working on the navigation menu is made by several nested lists, when one element is clicked on the <li> element with the page name acquires the .active class, if it belongs to a nested list all parent li elements above also acquire the .active class.
I'd like to be able to style the last <li> element with class .active since it corresponds to the currently open webpage.
I'm working with Omeka s content management system, which means that I can't use javascript or modify the HTML files, so I'm looking for a solution in pure CSS.
here is the menu structure:
`
<ul class="">
<li >
Introduction
</li>
<li>
level 1
<ul>
<li>
subpage
<ul>
<li>
sub-subpage
<ul>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
here is when I'm on th page "sub-sub-page":
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
`
I've tried to use li.active:last-of-type but it only select the last element of type li.
ul *{
color : #000;
text-decoration: none
}
ul .active ul li ul li ul li a{
color : #f00;
font-weight : bold;
}
<ul class="">
<li >
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li class="active">
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
It appeared simpler than I first thought:
Given the current structure, from all nested active elements you need to select the li that only has an a element. To make it work in general (other than a list element) don't use the li element selector at all.
I added two differently nested examples in the snippet along with an ::after text...
.active > a:only-child { color: red }
.active > a:only-child::after { content: ' (active)' }
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-subpage
<ul>
<li>
sub-sub-page
</li>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li>
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li class="active">
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br><br><br>
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul class="">
<li>
Introduction
</li>
<li class="active">
level 1
<ul>
<li class="active">
subpage
<ul>
<li class="active">
sub-sub-page
</li>
<li>
sub-sub-page
</li>
<li>
sub-subpage
</li>
<li>
sub-sub-page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to remove the bullet point for this code. tried many ways but no luck. any help?
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
.widget ul li{ list-style-type: none;}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
As the div container only list contact information, I'd recommend styling the elements using the wpcw-widget-contact class as it has a great fit with the context.
.wpcw-widget-contact ul {
list-style: none;
}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
You also might be interested to look up more details about the CSS property used on this answer.
<ul class="nav">
<li class="dropdown opener">Moodle community
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle free support" href="https://moodle.org/support">Moodle free support</a></li>
<li class="divider"> </li>
<li class="dropdown-submenu">Moodl
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="Moodle Docs" href="http://docs.moodle.org">Moodle Docs</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"> </li>
<li><a title="Moodle.com" href="http://moodle.com/">Moodle.com</a></li>
<li class="dropdown opener langmenu">English (en)
<ul class="dropdown-menu dropotron level-0 left">
<li><a title="English (en)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=en">English (en)</a></li>
<li><a title="عربي (ar)" href="http://192.168.1.123/moodle30nw/?redirect=0&lang=ar">عربي (ar)</a></li>
</ul>
</li>
</ul>
.navbar .nav > li:nth-of-type(2) a:hover{
background-color: #407a61 !important;
color:#fff !important;
}
Why my css is not working here i would like to change the hover background-color of the second element how can i apply it. Is any other way to do it.
Check Here Your Answer
You have to remove > operator from the CSS
Here is the Demo
HTML
<div class="navbar ">
<div class="nav">
<ul>
<li>First One</li>
<li>Second One</li>
<li>Three One</li>
<li>Four One</li>
</ul>
</div>
</div>
CSS
.navbar .nav li:nth-of-type(2):hover {
color:red;
}
Im using the ZURB Foundation Topbar, I like it apart from a bug I've found. On 2nd level drop downs, if you highlight then click on the link (li elements) just before it takes you to the page you clicked on, the active highlight flicks to one of the above elements and back.
---[The reason its flicking to one of the above elements, is due to it being the 1st level dropdown to be selected, for some reason it flicks to the previous level drop down then back the the 2nd level choice]---Still No idea to fix it though.
<!-- Nav Section Mobile-->
<div class="top-bar-container hide-for-large-up">
<nav class="top-bar">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Nav Section -->
<ul class="">
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class=""><a title="" href="/page.html">page</a></li>
<li class="divider hide-for-small"></li>
<li class="has-dropdown">pages
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li><a href="/page.html" >page</a></li>
<li><a href="/page.html" >page</a></li>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
<li class="divider hide-for-small"></li>
<li class="has-dropdown">More
<ul class="dropdown">
<li class="divider hide-for-small"></li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
</div>
In Foundation 4 there is a bug because of a pseudo class being used with a colon :. It should be a period . after the li:
.top-bar-section ul li:hover > a {
It should read:
.top-bar-section ul li.hover > a {
That'll fix it right up
I'm trying to select the first anchor tag of a nested li menu tree:
<div class="footermenu">
<ul class="menu">
<li class="expanded first">
First menupoint
<ul class="menu">
<li class="first">First submenupoint</li>
<li>Second submenupoint</li>
<li>Third submenupoint</li>
<li class="last">Fourth submenupoint</li>
</ul>
</li>
<li class="expanded last">
Second menupoint
<ul class="menu">
<li class="first">First submenupoint</li>
<li>Second submenupoint</li>
<li>Third submenupoint</li>
<li class="last">Fourth submenupoint</li>
</ul>
</li>
</ul>
What I'm trying to accomplish is to select only the first anchor tag of the main menupoints.
My css is:
div.footermenu li.expanded a:first-child {
font-weight: bold;
}
The problem is that this CSS still selects the submenupoints and I don't know why.
You want to use div.footermenu li.expanded > a:first-child
jsFiddle
http://jsfiddle.net/eRTV6/
div.footermenu li.expanded > a:first-child {
font-weight: bold;
}
Your original selector will select all anchor elements which are first-children of li.expanded, by adding a direct descendant selector, >, you specify that you only want to select the first, direct descendant of li.expanded which are anchors.
Try this:
<html>
<head>
<style TYPE="text/css">
div.footermenu li.expanded>a{
font-weight: bold;
background: Red;
}
</style>
</head>
<body>
<div class="footermenu">
<ul class="menu">
<li class="expanded first">
First menupoint
<ul class="menu">
<li class="first">First submenupoint</li>
<li>Second submenupoint</li>
<li>Third submenupoint</li>
<li class="last">Fourth submenupoint</li>
</ul>
</li>
<li class="expanded last">
Second menupoint
<ul class="menu">
<li class="first">First submenupoint</li>
<li>Second submenupoint</li>
<li>Third submenupoint</li>
<li class="last">Fourth submenupoint</li>
</ul>
</li>
</ul>
</div>
</body>
</html>