Adjacent sibling selectors

One of the problems with knowing a little about a lot of things is that you end up missing out on the subtle details of a lot of things.

And so it was with adjacent sibling selectors.

While I have received expert-level flack for my indentation of paragraphs here on the blog — I believe the criticism was along the lines of “that’s so print” — I simply cannot reconcile myself to using vertical space to separate paragraphs.

This style is not without its challenges. For the longest time I opened every blog post with:

just so the first paragraph wouldn’t include the standard 2em indent. Eventually I eliminated the need for this with better CSS:

That automagically removes the indenting from the first paragraph of a post. But I was still left with the issue of not wanting to indent the first paragraph following an image:

It turns out there was a really, really easy way to achieve this that I had absolutely no knowledge of: using an adjacent sibling selector:

In other words, “if a paragraph follows an image, then don’t indent it.” Neato. I’ve added similar logic for paragraphs following code blocks (like this paragraph), blockquotes, and lists.