last-child of div class

2019-03-19 14:20发布

I am finishing my wordpress web page and I want to style (with the 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 the CSS? (Note that it's not a list so I can't use pseudo-classes)

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

4条回答
Root(大扎)
2楼-- · 2019-03-19 14:22
.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)

查看更多
放我归山
3楼-- · 2019-03-19 14:26

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.

查看更多
Root(大扎)
4楼-- · 2019-03-19 14:33

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

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
查看更多
ゆ 、 Hurt°
5楼-- · 2019-03-19 14:47

Pretty simple solution:

#wrapper :last-child
{
    border:none;
}
查看更多
登录 后发表回答