/ coding

Element+Element in CSS

Related:WordPress: Omitting a horizontal rule after the last post

Nick del Pozo pointed out an all-CSS solution for omitting the final post separator on a WordPress blog.

This was a new one to me. It seems in CSS you can use the + selector between classes in your style sheet like this:

.post+.post {
	/*your style here*/

This rule would only apply to a .post that follows another .post. So if you have two .posts in a row, the rule would only apply to the second.

Have a look at this CodePen for details.

Pros and cons

I’m inclined to lean towards solutions that, like this one, simply involve HTML and CSS. In contrast, my previous solution involves a PHP if statement inside of the WordPress Loop.

In this particular use case, I suppose the only argument against the element+element CSS solution relates to semantics. Visually, it can be made to look the same. Semantically, hr is a horizontal rule, where border-top is a border.

Whether this level of hair-splitting is important or not is up to you; it does get the job done though.

Either way, the element+element CSS rule is a welcome addition to my tool belt.

Element+Element in CSS
Share this