1internet Posted May 1, 2013 Share Posted May 1, 2013 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 More sharing options...
DavidAM Posted May 1, 2013 Share Posted May 1, 2013 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. Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427626 Share on other sites More sharing options...
1internet Posted May 1, 2013 Author Share Posted May 1, 2013 That selects the ul, but was a good theory. Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427635 Share on other sites More sharing options...
DavidAM Posted May 1, 2013 Share Posted May 1, 2013 Then is it: #product_tabs ul li:last-child { Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427640 Share on other sites More sharing options...
1internet Posted May 1, 2013 Author Share Posted May 1, 2013 Doesn't work either. #product_tabs ul li a:last-child { didnt work either, as it selected them all. Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427644 Share on other sites More sharing options...
DavidAM Posted May 1, 2013 Share Posted May 1, 2013 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 { Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427652 Share on other sites More sharing options...
1internet Posted May 2, 2013 Author Share Posted May 2, 2013 Still nothing works!! This is driving me crazy. Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427676 Share on other sites More sharing options...
Psycho Posted May 2, 2013 Share Posted May 2, 2013 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. Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427691 Share on other sites More sharing options...
denno020 Posted May 2, 2013 Share Posted May 2, 2013 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 Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427734 Share on other sites More sharing options...
1internet Posted May 2, 2013 Author Share Posted May 2, 2013 denno020, can you do that again but with selecting the anchors? Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1427811 Share on other sites More sharing options...
denno020 Posted May 6, 2013 Share Posted May 6, 2013 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 Link to comment https://forums.phpfreaks.com/topic/277516-struggling-to-select-the-last-child/#findComment-1428575 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.