Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

last-child of div class

I am finishing some Wordpress web page and I want to style (with CSS) the roll of entries in the Posts page. Wordpress creates this:

<div class="entry">

There are loads of these elements in the page, to separate them I used border at the bottom of the entry. The problem is that I don't want this border on the last entry. Can be anything like that done in CSS? (Note that it's not a list so I can't use pseudo-classes)

Here's 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>

Thanks in advance for your help.

like image 474
Tom11 Avatar asked Oct 18 '12 16:10

Tom11


2 Answers

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

Let's say you have a list <li> with links <a> inside, and you want to get that last <a> of the <li>'s. Just use:

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

This will select the last of the .entry and target it's link(s)

like image 63
JimmyRare Avatar answered Oct 22 '22 01:10

JimmyRare


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

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
like image 22
Kevin Boucher Avatar answered Oct 22 '22 01:10

Kevin Boucher