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.
.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)
For the most comprehensive browser support, I would recommend using this:
.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With