Get a FREE Shopify Website Audit Find out more
I design .

I'm Ketan ‐ A Melbourne web designer and developer
with over 20 years of industry experience.

Head icon.

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.