I want to style the first list item of a UL, the list item is encased in an <a> tag.
I would have thought it would be simple, just this: http://jsfiddle.net/PHhFX/ but that isn't working.
Anyone any clue?
You're not supposed to encase a <li> in an <a> — in your HTML you can only have your <li> elements as children of the <ul>.
You probably meant to do it the other way around (<a> within <li>), then select
ul li:first-child
jsFiddle preview
It should work like this: http://jsfiddle.net/PHhFX/11/
CSS markup:
ul li:first-child {
border: 1px solid #000;
}
HTML markup:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
p.s.: you shouldn't wrap <li> elements with <a> elements. Remember, after a <ul> comes a <li>
Hope it helps!
Here you go, fixed your html and css:
Html:
<ul>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
</ul>
And css:
ul li:first-child {
border: 1px solid #000;
}
Here is live example in jsFiddle
The HTML5 spec details that the li element may be contained by the following elements:
ol
ul
menu
You'll note that a is not among them.
Link tags are not valid children of lists (<ul> or <ol>) see: Is anything except LI's allowed in a UL?
You must have the links inside the list-items:
<li>AAA</li>
and so:
ul li:first-child a{
border: 1px solid #000;
}
see: http://jsfiddle.net/PHhFX/17/
Use ul a:first-child>li instead of ul a:first-child but this is a hack.
Border is not inherited property.
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.
Please consider the following HTML :
<div class="mytest">
<ul>
<li>Parent 1</li>
<li>Parent 2
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Parent 3</li>
</ul>
</div>
I want to put a border around the "parent" li only, and I was convinced this CSS would do the trick :
.mytest > ul li {border : 1px solid #000;}
I read this selctor as : "select li which are children of a ul which is a direct children of a element with class mytest". But if I use that, the "child" li's also get the border. cfr this fiddle. Can someone explain why please ? I see no reason and I'm probably missing something important here cause I'm sure I already used this selector sucessfully for the same purpose before...
You must add direct child selector between <ul> and <li> like so:
.mytest > ul > li {border : 1px solid #000;}
With your code, you targeted all <li> in <ul> elements directly child of .mytest
Try
.mytest > ul > li {border : 1px solid #000;}
Try to add > before li like this Demo
.mytest > ul > li {border : 1px solid #000;}
Then only it will be considered as direct children of ul and the style will be applied only for that li. Hope this helps!
Your selector, as it currently stands, selects the lists that are immediate children of your parent div and all descendant items of that list.
To have it select only those list items that are direct descendants if the list, you must add another child selector, like so:
.mytest>ul>li
Direct child selector selects the immediate child that follows the parent so your code would go like this -
.mytest is the parent and its direct child is ul and ul direct children are li
.mytext > ul > li {border : 1px solid #000;}
is the correct format, also if you want to add only to the first direct child you could do like
.mytest > ul > li:first-child {border : 1px solid #000;}
Warning... not the sharpest tool in the CSS toolbox here...
I'm trying to write a tree control using ULs... and stuck on a CSS issue. To simplify the question, I boiled down the example to something that might not make sense, but the essence of the CSS issue is as simple as possible.
Consider this html:
<ul>
<li><div>should be green :)</div>
<ul>
<li><div>should be green :)</div></li>
<li><div>should be red :)</div></li>
</ul>
</li>
<li><div>should be red :)</div>
<ul>
<li><div>should be green !!!!!!!!!!!!</div></li>
<li><div>should be red :)</div></li>
</ul>
</li>
</ul>
and this CSS:
ul li{
background-color: green;
}
ul li:last-child div{
background-color: red;
}
The one item that says:
<li><div>should be green !!!!!!!!!!!!</div></li>
Appears red instead of green!!!!!
Since the div that contains it is contained in an LI that is NOT the last in the list, I expected it to use the normal selector instead of the last-child selector
Here is a fiddle for your reputation point seeking pleasure!
http://jsfiddle.net/dmd1214/5Vm58/16/
You need to use Child selector for selecting the last element(div) of li.
ul li:last-child > div{
background-color: red;
}
JS Fiddle
Make your descendant selector a child selector:
ul li:last-child > div {
background-color: red;
}
That way, it matches only the <div> elements that are children of that last <li> element.
Demo: http://jsfiddle.net/5Vm58/20/
It's because you are targeting a div with your :last-child usage.
ul li {
background-color: green;
}
ul li:last-child {
background-color: red;
}
Fiddle: http://jsfiddle.net/5Vm58/19/
I have been trying to create a border-color change hover effect with CSS and something seems to not be working properly. Here is my code:
Markup:
<ul>
<li class="hover">
<img src="img/content/lighter.png" alt="lighter"/>
<p>Discusing Strategy</p>
</li>
<li class="triangle"></li>
<li class="hover">
<img src="img/content/wrench.png" alt="wrench"/>
<p>Beginig <br/> Designs & Development</p>
</li>
<li class="triangle"></li>
<li>
<img src="img/content/car.png" alt="car"/>
<p>Delivering Product</p>
</li>
</ul>
CSS:
div#bpath ul li.triangle {
width: 0;
height: 0;
border-top: 95px solid #d0dde5;
border-left: 20px solid #c1c1c1;
border-bottom: 95px solid #d0dde5;
}
div#bpath ul li.hover:hover li.triangle {
border-left-color: #5f9999;
}
What am I doing wrong here? I used the same technique to change the color of the p element and that worked. Why dosen't the border color change work?
Your selector:
div#bpath ul li:hover li.triangle
is trying to match a li element of class 'triangle' within an li. As you don't appear to have a nested list (therefore no li elements within other li elements) this doesn't seem able to work.
If you remove the latter li (li.triangle) to give (all, or one, of) the following:
div#bpath ul li:hover,
#bpath ul:hover li.triangle:hover,
#bpath ul:hover li.triangle,
#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
this might work. Assuming your posted-HTML is correct.
If you want all triangle li's to be changed use this:
div#bpath ul:hover li.triangle{
border-left-color: #5f9999;
}
If you want just the next triangle element it's more tricky but you can try this:
div#bpath ul li:hover + li.triangle {
clear:both;
}
I think this doesn't work on ie. If you want it to work on IE i would go for jquery.
you should use this way,
div#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
you can use this fiddle, which changes the triangles color and adapt it to clarify your question. http://jsfiddle.net/j7YSu/1/
(or just accept it as the right answer :))
i had some issues with your code, but maybe this fiddle will help: http://jsfiddle.net/j7YSu/3/
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.