last-child of div class

Question

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.

It would be great if you yould show a part of the HTML-structure and how the `
`-elements are placed. — insertusernamehere, Oct 18 '12 at 16:52

tuff · Accepted Answer · 2012-10-18T17:08:52.043

14

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

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

Note that it´s not a list so I can´t use pseudo-classes)

JSYK, the pseudoclass does not depend on the containing element being a list. If you meant that the final .entry element is not actually the last child of its container, it may still be possible to select it. But I can't tell you how unless you show me what the actual markup looks like.

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

edited Oct 18 '12 at 17:08

answered Oct 18 '12 at 16:47

tuff

4,895
6
26
43

I guess, as the OP stated, this won't work. It seems, that the entries are not listed after each other within a container. – insertusernamehere Oct 18 '12 at 16:48
I thought he didn't mean a list per se, but a listing of `
`s in a single container where `:last-child` would work. But maybe I got it wrong. :)
– insertusernamehere Oct 18 '12 at 16:50
It is currently not possible to select the last element of a certain class using only a CSS selector, without making assumptions about the markup. http://stackoverflow.com/questions/10230416/is-it-possible-using-current-browsers-to-use-pseudo-classes-to-detect-first-and – BoltClock Oct 18 '12 at 16:52
No, but if it's `last-of-type`, or if it there is some other particular periphery which allows us to target it, it could still be selected. Depends on the markup! – tuff Oct 18 '12 at 16:53
But also `last-of-type` means *the last child of its parent that is this element*. But you're right. It's all about the markup. – insertusernamehere Oct 18 '12 at 16:55
No, unfortunately this doesn´t work.. Yes, they aren´t listed within any container. – Tom11 Oct 18 '12 at 16:57
1

"they aren't listed within any container" is too ambiguous to be useful. Can you please post the markup? – tuff Oct 18 '12 at 16:59
If you get rid of the `BR` tags will an `.entry` div become the last child of its container? – Kevin Boucher Oct 18 '12 at 17:06
Yes, the last `.entry` is really the last child of that wrapper. – Tom11 Oct 18 '12 at 17:08
Then you can use `.entry:not(:last-of-type)`. – tuff Oct 18 '12 at 17:09
Well, to clear that up, there is another code, after the last `.entry` , so this method doesn´t work.. – Tom11 Oct 18 '12 at 17:17

JimmyRare · Answer 2 · 2012-10-18T16:56:02.983

9

.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)

edited Oct 18 '12 at 16:56

answered Oct 18 '12 at 16:51

JimmyRare

3,958
2
20
23

But I don´t want to target it´s link(s), I want to border that `.entry` element. – Tom11 Oct 18 '12 at 17:10
Then just use the first part? Or did I miss something? – JimmyRare Oct 18 '12 at 17:18
The you probably have a [specificity](http://css-tricks.com/specifics-on-css-specificity/) problem. – JimmyRare Oct 18 '12 at 17:29

score 4 · Answer 3 · answered Oct 15 '14 at 05:12

4

Pretty simple solution:

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

answered Oct 15 '14 at 05:12

Ishwor

41
1

score 1 · Answer 4 · answered Oct 18 '12 at 16:49

1

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

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

answered Oct 18 '12 at 16:49

Kevin Boucher

16,426
3
48
55

This is no different in browser support from `.entry:not(:last-child)`. – BoltClock Oct 18 '12 at 16:50
@BoltClock True, but Kevin's way will have borders on all the elements on non supporting browsers, rather than none, which is probably pereferable – Andy Oct 18 '12 at 16:51
@BoltClock you're right, but it depends on what OP wants to have as degredation using this method. All, or None. – Xhynk Oct 18 '12 at 16:53
2

Of note, just to note it if someone comes across this and it helps; while :not and :last-child share the exact same browser support, :first-child has a little more (ie8 supports :first-child, but does not support :not or :last-child). Just in case someone is head scratching why :last-child and :not don't work the same as :first-child in ie8. – Patrick JC Oct 18 '12 at 17:01

last-child of div class

4 Answers4

Linked