How to select first a element of li with CSS? - css

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>

Related

How can I style the last of a serie of elements in css with a specific class?

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>

how to target first-child of first-child [duplicate]

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.

how to remove the bullet point of this code using css

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.

: nth child selector class is not applied on my page I would like to apply on second

<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;
}

css: horizontal list positioning issue only with 2 or more li elements

I'm trying to create a horizontal list, something like this
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li>
<a>Foo Bar</a>
</li>
</ul>
</nav>
The problem is that with only 1 li element it works (like this ) but with 2 the first li item is not positioned correctly (like this )
Can someone explain to me whats happening?
UPDATE: remove type with class 'active' on anchor!

No need to use absolute positioning. Just do as following:
li.active a {
color: #abc522;
padding: 20px 40px 13px;
width: 146px;
background-color: white;
}
fiddle

Remove the class active from the first list item tag.
<nav class="tabs">
<ul>
<li> <-- Here
<a class="active">Bar Foo</a>
</li>
<li>
<a class="active">Foo Bar</a>
</li>
</ul>
</nav>
OR
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li class="active">
<a>Foo Bar</a>
</li>
</ul>
</nav>

Resources