What is the difference between :first-child and :first-of-type?

Q: What is the difference between :first-child and :first-of-type?

Both `:first-child` and `:first-of-type` are CSS pseudo-classes used to target elements based on their position, but they work differently. `:first-child` – Selects an element if it is the very first child of its parent, regardless of type. `:first-of-type` – Selects the first element of its specific type (tag) among its siblings. ul li:first-child { color: red; /* First li regardless of type */ } ul li:first-of-type { font-weight: bold; /* First li of its type */ } Item 1 (red and bold) Item 2 (red if first-child, otherwise normal) Paragraph Item 3 (not first-child, first-of-type applies to first li only) 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. Use `:first-child` when you want to style the very first child element regardless of type. Use `:first-of-type` when you want to style the first element of a specific type among siblings. Combine these pseudo-classes with other selectors for precise targeting. Test in different HTML structures, especially when other elements may precede the target element.

Difficulty: 3/10

CSS selectors, pseudo-classes, element positioning

Understanding :first-child vs :first-of-type in CSS

Both :first-child and :first-of-type are CSS pseudo-classes used to target elements based on their position, but they work differently.

Differences

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.

What is the difference between :first-child and :first-of-type?

Difficulty: 3/10

CSS selectors, pseudo-classes, element positioning

Understanding :first-child vs :first-of-type in CSS

Both :first-child and :first-of-type are CSS pseudo-classes used to target elements based on their position, but they work differently.

Differences

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.

What is the difference between :first-child and :first-of-type?

Understanding :first-child vs :first-of-type in CSS

What is the difference between :first-child and :first-of-type?

Understanding :first-child vs :first-of-type in CSS

Scenario Questions

Follow-up Questions