struggling to select the last child

[1internet]

I want to select the last child (li), but it doesn't select. It must be the last, i.e. not the 5th, becuase the list quantity changes.

 

HTML:

	<div id="product_info">
		<h1>Hobo Indoor Data Loggers</h1>
		<div id="product_tabs">
			<ul>
				<li><a href="#description">Description</a></li>
				<li><a href="#features">Features</a></li>
				<li><a href="#specifications">Specifications</a></li>
				<li><a href="#technical">Technical</a></li>
				<li><a href="#recommendations">Recommendations</a></li>
				<span style="clear:both;"></span>
			</ul>
		</div>
	</div>

CSS:

#product_tabs ul {
    background: #3463a0;
    border-radius: 5px;
    padding: 0px 5px;
    border: solid;
}

#product_tabs li {
    float: left;
}

#product_tabs li a {
    background: #3463a0;
    color: #f6f6f6;
    padding: 10px 20px;
    font-weight: bold;
}

#product_tabs li a:last-child {
    border-radius: 5px;
}

Any idea why it won't just select the #recommendations li, instead it selects all of them.

Edited May 1, 2013 by 1internet

[DavidAM]

I want to select the last child (li), ...

LI is a child of the UL, isn't it? Wouldn't it be:

#product_tabs ul:last-child {

Disclaimer: I'm not an expert at CSS, so I could be way off here.

[1internet]

That selects the ul, but was a good theory.

[DavidAM]

Then is it:

 

#product_tabs ul li:last-child {

[1internet]

Doesn't work either.

#product_tabs ul li a:last-child {

didnt work either, as it selected them all.

[DavidAM]

Are you trying to select the Anchor (A) or the List Element (LI)? Your original post indicated LI.

 

What browser are you testing in?

 

This #product_tabs ul li:last-child { says the last LI in the UL

 

While this #product_tabs ul li a:last-child { says the last A in all of the LI's in the UL. Since there is only one anchor in all of your LI's, that would select all of the anchors in that UL

 

If you want THE anchor in the LAST LI, try this: #product_tabs ul li:last-child a {

[1internet]

Still nothing works!! This is driving me crazy.

[Psycho]

If the number of elements is dynamic then you must be creating them using server-side code, correct? Why not just put in a class name on the last element and use that and be done with it.

[denno020]

Try taking the <span> out.. It kinda doesn't make sense as elements in a ul need to be in an li.. At least that's what I've always thought and that's how I work..

 

http://jsfiddle.net/v3DYw/

 

Denno

Edited May 2, 2013 by denno020

[1internet]

denno020, can you do that again but with selecting the anchors?

[denno020]

Why was I not notified that there was a response here :/..

 

Anyways, sorry for the delayed reply, but here you go:

 

http://jsfiddle.net/v3DYw/1/

 

Exceptionally simple, just had to add the a after '#name ul li:last-child', as DavidAM mentioned earlier.

 

Denno