I'm experimenting here with Pseudo-classes and trying to something I would usually do with a style class. I have a unordered list with multiple sub unordered lists and so on.
I want to only make sure the first level of li tags are been set to float left.
Here is my html
<body>
<div id="MainMenu">
<ul id="nav">
<li>Home</li>
<li>
About
<ul>
<li>The Product</li>
<li>Meet The Team</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
Business Hours
<ul>
<li>Week Days</li>
<li>Weekends</li>
</ul>
</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>
</body>
I tried a style like this.
body {
font: 13px/160% Trebuchet MS,Arial,Helvetica,Sans-Serif;
margin:0;
padding:0
}
#nav{
list-style:none;
font-weight:bold;
width:100%;
}
#nav li{
float:left;
margin-right:40px;
position:relative;
}
The issue with this is, its saying all li descendants of id nav get set to float left. Now I only want the first level li tags to float to left and all the other level li tags to be ignored. Please don't answer by saying use a class name for all the top level li tags. I already am aware I could approach it like this. What I'm after is to learn some of the Pseudo-classes and how they may help me in this approach.
For example I need something that is like #nav li:first-child{ .... } But this is only going to give me the first li in the top ul list. I want all the top level children of the ul list and ignore the second level li tags and so on. Is there a Pseudo-classes that can accomplish this.
Thanks
you can use #nav > li this matches all elements that are the immediate li children of #nav.
More info here and here.
A demo: http://jsfiddle.net/9M6p2/
A good approach would be:
#nav li { float: left; }
#nav li li { float: none; }
You could use #nav li like you already do and #nav li ul or #nav li ul li to style the second level LI-Elements.
Related
In my css file I have
.myclass > ul > li > a {
display:inline;
list-style-type:none;
}
both this style properties display and list-style-type are not working within "a" tag. However they are working if placed within "li" which does not serve the purpose because I want links which are aligned horizontally. Please advise what can be done.
<div class="myclass">
<ul>
<li>About Us </li>
<li>About Us </li>
<li>About Us </li>
</ul>
</div>
It looks like you're targeting the wrong elements here - essentially <a> has a list-style-type of none and is inline already anyway, so you're not seeing anything happen. list-style-type is something that will affect the <li> rather than the <a>:
.myclass > ul > li {
display: inline;
list-style-type: none;
}
To help make this a little clearer, you could also try adding a property that would have a visible impact on your <a> elements, like color:
.myclass > ul > li > a {
display:inline;
list-style-type:none;
color: hotpink;
}
Then you'll see that your selector was working - it just wasn't having any impact.
So i have a page like this :
<body>
<ul>
<li><span class="first">First</span></li>
<li><span class="second">Second</span></li>
<li><span class="third">Third</span></li>
<li><span class="fourth">Fourth</span></li>
</ul>
</body>
I want to change the style of the "li" tags that are only in the first and the second span.
I tried this .first,.second li{margin-left:10px;}, but it didn't work.
The comma needs to separate COMPLETE element paths:
.first li, .second li
{margin-left:10px;}
I've wasted enough time explaining why I didn't mention your improper formatting that I might as well correct you on it at this point;
<body>
<ul>
<li class="first">First</li>
<li class="second">Second</li>
<li class="third">Third</li>
<li class="fourth">Fourth</li>
</ul>
</body>
CSS:
li.first, li.second {
margin-left:10px;
}
If we're really going to travel down this rabbit hole and teach code, might as well mention this can be done entirely without classes:
ul li:nth-child(1), ul li:nth-child(2)
{
margin-left:10px;
}
The li has to follow each parent element, you can't group the parents together and then expect the child to apply to each of them. What you were asking for is for the style to apply to all li that are children of elements with class=second, and to all elements with class=first, not to all li that are children of elements with class=first
.first li, .second li { margin-left:10px }
https://jsfiddle.net/udnjqqkh/
.first li {margin-left:10px;}
.second li {margin-left:10px;}
I'm having a list of images and below the name of the person belonging to the image as an UL. When hovering on the name then a sentence to belonging to the person will be displayed.
So it looks like this
<ul>
<li>
Name
<ul>
<li></li>
<li class="slogan1">some kind of sentence</li>
</ul>
</li>
<li>
Name 2
<ul>
<li></li>
<li class="slogan1">some kind of sentence</li>
</ul>
</li>
</ul>
That works fine so far. I want now that the child UL Element of the first LI Element is being displayed initally when the page is opened and not only on the hover event. I was working around with :first-child but didn't had any success.
The current relevant CSS part looks as follows.
ul li ul{
display: none;}
ul li:hover ul{
display: block;}
ul li:hover ul li a{
background: #009EE3;
height:10px;}
ul li:hover ul li.slogan1 a{
background: #009EE3;
height:45px;
width:958px;
position:absolute;
left:0px;
padding-top:5px;
line-height:130%;}
For additional reference and to view the current implementation Link to page
Any help, tipps, hints are highly appreciated...many thanks...
first-child was the right idea, just add:
ul li:first-child ul {
display:block;
}
JSFiddle
Have simple document with two unordered lists. The two lists are separate from each other in that one is not nested inside of the other.
See working example here: JSfiddle
A class is being applied to the First List, but not the Second List. I'm finding that the class is being applied to all lists on the page, even when the other lists do not share the same class.
Markup:
<style>
#listContainer
{
margin-top:15px;
}
. .expList ul, li
{
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
.expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
.expList { clear:both;}
</style>
<p style='font-size:1.4em;'>First list</p>
<div id='listContainer'>
<ul class='expList'>
<li>A<ul><li>A1</li></ul></li>
<li>A</li>
</ul>
</div>
<hr>
<p style='font-size:1.4em;'>Second list. </p>
<ul>
<li><b>Cats</b>
<ul>
<li>Cheezburger</li>
<li>Ceiling</li>
<li>Grumpy</li>
</ul>
</li>
<li><b>Role Models</b>
<ul>
<li>Bad Luck Brian</li>
<li>Paranoid Parrot</li>
<li>Socially Awkward Penguin</li>
</ul>
</li>
</ul>
Why would applying a class to a completely separate UL affect a different, non-nested UL on the same page?
EDIT - see the accepted answer to this question for a very good explanation of this problem.
You're applying the style to all li elements:
.expList ul, li
...means "ul elements in element with class expList, and all li elements".
Since it is the ul that has class expList, I'm wondering if you actually want:
.expList li { ... }
Meaning all li elements in ul.expList. Guessing though, hard to say without more info.
i need only first 'li' element with gray background color. But first 'li' of each 'ul li' my background color gray is applying. Background color should apply only for the first li(My Example).
http://jsfiddle.net/fX9Gy/
Can anybody please solve the prob. Thanks
Give class to your parent UL. Write like this:
HTML
<ul class="parent">
<li>one</li>
<li>one
<ul>
<li>two</li>
<li>two</li>
<li>two</li>
</ul>
</li>
<li>one</li>
</ul>
CSS
.parent > li:first-child{background-color:#ccc}
Check this for more http://jsfiddle.net/fX9Gy/27/
Add this on the end of your css:
ul li ul li:first-child{background-color:transparent}
Or give the element an id:
<li id="first">one</li>
#first {background-color:#ccc}
** EDIT **
You could try this css:
ul li{color:red}
ul li > ul li{color:blue}
li {background-color:#ccc}
ul ul li {background-color:transparent}
li + li {background-color:transparent}
Either make the selector more specific:
ul li ul li:first-child{background-color:transparent}
Or add a class to the UL And select the first child there:
ul.nested li:first-child{background-color: #fff;}
... <li>one
<ul class="nested">
<li>two</li>
...
http://jsfiddle.net/Kyle_Sevenoaks/fX9Gy/15/
hi please see the updated css i hope this will work
ul li{color:red}
ul li > ul li{color:blue}
ul li:first-child{background-color:#ccc}
ul li ul li:first-child {background:none;}
http://jsfiddle.net/fX9Gy/23/
You can try this.
li {color:gray}
ul ul li {color:red}
li + li {color:red}
This will work in browsers down to ie 7 aswell
If you don't want to add class or id something, then you have to use jquery. but you need to add class name for ul.
but without jquery, using CSS you need to add one more line for ul which is inside li,
ul li ul li:first-child{ background-color:white; }
Updated fiddle. Added a class to parent ul
http://jsfiddle.net/fX9Gy/26/