Last-child from div class

Question

I am finishing some Wordpress webpage and want to style (using CSS ) the list of posts on the Posts page. Wordpress creates this:

 <div class="entry"> 

There are many of these elements on the page, to separate them, I used the border at the bottom of the post. The problem is that I do not want this border for the last record. Could something like this be done in CSS? (Note that this is not a list, so I cannot use pseudo-classes)

Here is my CSS, it's pretty simple:

 .entry{ border-bottom: 1px solid yellow; } 

HTML:

 <div id="wrapper"> <br /> there are loads of code <br /> <div class="entry">bunch of code there</div> <br /> <div class="entry">bunch of code there</div> <br /> <div class="entry">bunch of code there</div> <br /> another huge code <br /> </div> 

Thank you in advance.

Answer 1

You already named what you were looking for: last-child : http://reference.sitepoint.com/css/pseudoclass-lastchild

So use .entry:not(:last-child) { border-bottom: 1px solid yellow; } .entry:not(:last-child) { border-bottom: 1px solid yellow; }

Please note that this is not a list, so I cannot use pseudo-classes)

JSYK, the pseudo-slot does not depend on the fact that the containing element is a list. If you meant that the last element of .entry is actually not the last child of its container, you can still select it. But I can’t say how, unless you show me what the actual markup looks like.

If your last div.entry will not be followed by any other .entry:not(:last-of-type) , then the .entry:not(:last-of-type) selector will work for you.

Answer 2

 .entry:last-child { border-bottom: none; } 

Say you have a list <li> with links <a> inside, and you want to get the last <a> for <li> . Just use:

 .entry:last-child a { border-bottom: none; } 

This will select the last of the .entry and target it with links.

Answer 3

Pretty simple solution:

 #wrapper :last-child { border:none; } 

Answer 4

For the most comprehensive browser support, I would recommend using this:

 .entry { border-bottom: 1px solid yellow; } .entry:last-child { border-bottom: 0; }