PAYG Website Design services. Cancel anytime. See Plans

A quick note about styling the first element, but only if there’s more than one of them

← Blog

The paragraph you are reading right now is styled differently from the rest of the paragraphs down below. This only applies if there are more sibling paragraphs below.

I could do this using javascript or some cool stuff dynamically in my code, but it’s actually straightforward in CSS:

p.first-child:not(:last-child) {
  /* Add styles here */

These few lines of CSS target the first child paragraph, not the last (child) paragraph. So, if there’s only one paragraph, the styles won’t apply because it is also the last paragraph.

Subscribe to my newsletter

Sign up to get my latest blog articles direct to your inbox.

%d bloggers like this: