Jump to content

struggling to select the last child


1internet

Recommended Posts

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.

Link to comment
https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/
Share on other sites

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 {

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.