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.
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:This will select the last of the
.entry
and target it's link(s)You've already named what you're looking for:
last-child
: http://reference.sitepoint.com/css/pseudoclass-lastchildSo use
.entry:not(:last-child) { border-bottom: 1px solid yellow; }
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.For the most comprehensive browser support, I would recommend using this:
Pretty simple solution: