CSS :first-child pseudo selector

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a structural pseudo-class, means it is used to style content based on its relationship with parent and sibling content.

Using :first-child is very similar to :first-of-type but with one critical difference: it is less specific. :first-child will only try to match the immediate first child of a parent element, while first-of-type will match the first occurrence of a specified element, even if it doesn’t come absolutely first in the HTML.

In the example above the output would be the same, only because the first child of the article also happens to be the first p element. This reveals the power of :first-child: it can identify an element with relation to all its siblings, not just siblings of the same type.