1
:first-child – Selects an element if it is the very first child of its parent, regardless of type.
2
:first-of-type – Selects the first element of its specific type (tag) among its siblings.

Example: :first-child vs :first-of-type

In this example, :first-child applies only if the element is the very first child of the parent, whereas :first-of-type applies to the first element of that tag type, even if it's not the very first child.

Best Practices

1
Use :first-child when you want to style the very first child element regardless of type.
2
Use :first-of-type when you want to style the first element of a specific type among siblings.
3
Combine these pseudo-classes with other selectors for precise targeting.
4
Test in different HTML structures, especially when other elements may precede the target element.

Difficulty: 3/10

Topics: CSS selectors, pseudo-classes, element positioning

Scenario Questions

0-2 years experience

1
You're styling a list of articles where each has a header and a paragraph. You want the first paragraph to have a different font size, but your CSS using :first-child isn't working. Why?
2
You have a div with three span elements and one p element. You apply color: red to both :first-child and :first-of-type. What colors do you see and why?
3
A teammate says :first-child should style the first paragraph in a section, but it's not working. What’s the most likely reason?

2-5 years experience

1
Our dynamic blog component sometimes wraps the first paragraph in a span for analytics, and now our :first-child style breaks. How do you fix this without hardcoding element types?
2
A designer reports that the first item in a user-generated list sometimes doesn't get the top margin reset. You notice it's because a hidden comment node is the first child. How do you solve this reliably?
3
You're building a reusable card component where the first heading should have a larger font. The component can be used with h2, h3, or even divs as headers. Which selector do you use and why?

5-8 years experience

1
You're designing a themable component library where authors can nest arbitrary content inside a container. How do you ensure consistent styling of the first content element without assuming structure, and what edge cases keep you up at night?
2
A legacy CMS outputs unpredictable markup with comments, whitespace text nodes, and inline scripts. How do you reliably target the first actual semantic element (like p, h1, or div) without breaking in edge cases?
3
Your team is migrating from a rigid grid system to a flexible one. Previously, :first-child was used to reset margins. Now with dynamic content insertion, you're seeing layout shifts. How do you refactor this safely?

8+ years experience

1
You're leading a cross-team initiative to standardize UI components across 12 products. Some teams use :first-child, others :first-of-type. How do you decide the standard, and how do you handle legacy components that break under the new rule?
2
Our design system has a base typography component that’s used in 50+ micro-frontends. The first element styling breaks unpredictably in edge cases due to SSR hydration or third-party widgets injecting nodes. What architectural changes do you propose to make this robust long-term?
3
A legacy product uses :first-child for critical layout resets, but now we're adding A/B test variants that inject tracking elements. How do you de-risk this migration without breaking hundreds of pages, and what metrics do you track to validate success?

Follow-up Questions

❓What if you add a comment before the first paragraph? What does :first-child target then?
❓How would you debug a case where a button isn't getting the expected style even though it's clearly the first element?
❓Can you think of a scenario where :first-of-type is more reliable than :first-child?