I'm using the jquery package 'listnav' to generate an alphabetical list. The HTML that gets rendered separates each letter into a specific class as such:
<ul id="myList">
<li class="ln-a">
A text
</li>
... more 'A' items ...
<li class="ln-b">
B text
</li>
</ul>
I'm trying to apply a border at the top of every letter 'section' by using the first-child selector:
.ln-a:first-child{
border-top:1px white solid;
}
.ln-b:first-child {
border-top:1px white solid;
}
I get the border above the 'A' section, but not above any of the subsequent sections. Any suggestions? Thanks!
The problem is that .ln-b:first-child matches the elements with class ln-b that are the first child of its parent.
In your case, the first child only has the class ln-a, so there is no match.
What you want is some kind of :first-of-class, but that doesn't exist.
However, you can set the styles to all .ln-b elements, and then remove them for those which are not the first one:
.ln-b { /* Set styles */ }
.ln-b + .ln-b { /* Remove styles */ }
.ln-a,
.ln-b {
border-top: 1px black solid;
}
.ln-a + .ln-a,
.ln-b + .ln-b {
border-top: none;
}
<ul id="myList">
<li class="ln-a">A text</li>
<li class="ln-a">A text</li>
<li class="ln-b">B text</li>
<li class="ln-b">B text</li>
</ul>
You forgot to 'close' the list.
<ul id="myList">
<li class="ln-a">
A text
</li>
... more 'A' items ...
</ul>
<ul>
<li class="ln-b">
B text
</li>
</ul>
Using JQuery:
$(document).ready(function(){
$('.ln-a:eq(0)').css('border-top','1px red solid');
$('.ln-b:eq(0)').css('border-top','1px red solid');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li class="ln-a">
A text
</li>
<li class="ln-a">
A1 text
</li>
<li class="ln-a">
A2 text
</li>
<li class="ln-b">
B text
</li>
</ul>
Related
I want to change the background of "zxczxczxc" and "bbbbbb" to yellow. I try ul > li:first-child > a {
background: yellow;
} but it is not work. Any one have solution? thanks
Note: No add more class. It's must be css only.
<ul class="sub-menu">
<li>
<a>zxczxczxc</a>
<ul class="sub-menu">
<li><a>ccccc</a></li>
<li><a>bbbbddddddbb</a></li>
</ul>
</li>
<li>
<a>bbbbbb</a>
</li>
</ul>
Your Answer:
.link1{background-color:red}
.link2{background-color:Blue;
color:white;}
<li>
<a class="link1">zxczxczxc</a>
<ul class="sub-menu">
<li><a>ccccc</a></li>
<li><a>bbbbddddddbb</a></li>
</ul>
</li>
<li>
<a class="link2">bbbbbb</a>
</li>
</ul>
Buddy, you have a small typo in your code to set a background color we use background-color
body {
background-color: coral;
}
I have three lists:
<ul class="mighty-list" id="list1">
<li>Cool</li>
<li>Yah</li>
</ul>
<ul class="mighty-list" id="list2">
<div id="floating_button"></div>
</ul>
<ul class="mighty-list" id="list3">
</ul>
Now i want to write an s there a way to select list2+list3 ( or select list 1 only) , considering they are empty of any <li> children?
I'm aware that the :empty solution none of the above because list3 contains white space, so i need a different solution to select list with <li> only
There is a way using jQuery.
You detect any <li> on the page and add a class to the parent. Then you can do what you want to that class in the CSS.
$('li').parent().toggleClass('has-li', true);
.has-li {
/* your code here */
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mighty-list" id="list1">
<li>Cool</li>
<li>Yah</li>
</ul>
<ul class="mighty-list" id="list2">
<div id="floating_button"></div>
</ul>
<ul class="mighty-list" id="list3">
</ul>
I have this list in HTML
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
I want to put a background-color to my first link : 'Category 1' without affecting others links
Here's my CSS
.current_page_parent li:not(.children) a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
You can use first-of-type combined with a > combinator selector
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
The > combinator separates two selectors and matches only those
elements matched by the second selector that are direct children of
elements matched by the first.
li.current_page_parent:first-of-type > a{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
li.current_page_parent:first-of-type > a {
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
<div id="sideMenu">
<li class="current_page_parent">
Category 1
<ul class="children">
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
<li>Sub
</li>
</ul>
</li>
<li></li>
<li></li>
</div>
You can add class propery to the particular <a> and directly select the particular attribute by their class name
Here's example:
HTML:
<div id="sideMenu">
<li class="current_page_parent">
<a class="notInULChildren" href="#">Category 1</a>
<ul class="children">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li></li>
<li></li>
</div>
CSS:
.notInULChildren{
display: block;
padding: 5px 15px;
background-color: #d6205c;
}
FIDDLE
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.
i creat a dropdown list when mouse hover at #clim the height of #dropdown change from 0 to 150px . but the code not work .
html code
<div id="menu">
<ul>
<li id="index">Accueil</li>
<li id="clim">Climatisation</li>
<li id="ventil">Ventilation</li>
<li id="electro">Electromenager</li>
</ul>
</div>
</div>
<div id="dropdown" >
<ul>
<li id="index">Climatisation</li>
<li id="clim">Ventilation</li>
</ul>
</div>
CSS code
#dropdown{
margin-left:693px;
width:165px;
height:0px;
position:absolute;
background:#158DFB;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
i have a problem in this part . not working
#clim:hover #dropdown{
height:150px;
}
first of all, your code has extra finishing tags and 2 elements with the same id (#clim), that doesn't make the question very clear.
to make this work with css and no javascript you have to include the hidden element (the dropdown) inside the outer element that you will hover and trigger the dropdown to be shown.
try this instead and then add the remaining css rules you need:
<div id="menu">
<ul>
<li id="one">Accueil</li>
<li id="two">
Climatisation
<ul id="dropdown">
<li id="subone">sub Link</li>
<li id="subtwo">Another sub link</li>
</ul>
</li>
<li id="three">Ventilation</li>
<li id="four">Electromenager</li>
</ul>
</div>
#dropdown{
height: 0;
overflow:hidden;
-webkit-transition-duration:0.3s;
}
#menu:hover #dropdown{
height:150px;
}
when mouse hover at #clim the height of #dropdown change
You cannot do that with pure CSS, because there is no parent selector.