Why does CSS3 have both a :first-child and :nth-child() pseudo-class selector? [closed]

Question

Why does CSS3 have both a :first-child and :nth-child() pseudo-class selector?

I'm curious what the point is of :first-child, shouldn't :nth-child(1) select the exact same thing?

It seems weird to me to have two pseudo-class selectors to do the same thing and the only reason I can see is that :first-child is one character less to type but that comes at the expense of having one more pseudo-class selector to remember.

Answer 1

I think it's simply due to evolution of the CSS standard.

• first-child is a CSS Level 2 selector
• nth-child is a CSS Level 3 selector

CSS2 doesn't suddenly become obsolete just because CSS3 exists. From the CSS3 spec:

This document describes the selectors that already exist in CSS1 and CSS2, and further introduces new selectors for CSS3 and other languages that may need them.