Jump to content


Photo

struggling to select the last child

css

  • Please log in to reply
10 replies to this topic

#1 1internet

1internet

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 01 May 2013 - 04:12 PM

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 by 1internet, 01 May 2013 - 04:22 PM.


#2 DavidAM

DavidAM

    Advanced Member

  • Gurus
  • 1,949 posts
  • LocationSpring, TX USA

Posted 01 May 2013 - 04:22 PM

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.
-- I haven't lost my mind, it's backed up on tape ... somewhere!

#3 1internet

1internet

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 01 May 2013 - 04:47 PM

That selects the ul, but was a good theory.



#4 DavidAM

DavidAM

    Advanced Member

  • Gurus
  • 1,949 posts
  • LocationSpring, TX USA

Posted 01 May 2013 - 04:56 PM

Then is it:
 
#product_tabs ul li:last-child {

-- I haven't lost my mind, it's backed up on tape ... somewhere!

#5 1internet

1internet

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 01 May 2013 - 05:02 PM

Doesn't work either.

#product_tabs ul li a:last-child {

didnt work either, as it selected them all.



#6 DavidAM

DavidAM

    Advanced Member

  • Gurus
  • 1,949 posts
  • LocationSpring, TX USA

Posted 01 May 2013 - 05:19 PM

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 {
-- I haven't lost my mind, it's backed up on tape ... somewhere!

#7 1internet

1internet

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 01 May 2013 - 09:04 PM

Still nothing works!! This is driving me crazy.



#8 Psycho

Psycho

    Advanced Member

  • Gurus
  • 10,384 posts
  • LocationCanada

Posted 02 May 2013 - 12:45 AM

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.


The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#9 denno020

denno020

    Advanced Member

  • Members
  • PipPipPip
  • 701 posts
  • LocationAustralia

Posted 02 May 2013 - 07:00 AM

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 by denno020, 02 May 2013 - 07:03 AM.


#10 1internet

1internet

    Advanced Member

  • Members
  • PipPipPip
  • 137 posts

Posted 02 May 2013 - 03:00 PM

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



#11 denno020

denno020

    Advanced Member

  • Members
  • PipPipPip
  • 701 posts
  • LocationAustralia

Posted 06 May 2013 - 06:57 AM

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






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com