Which CSS pseudo-class selects only the first child of an element?:first:nth-child(1):first-child:first-of-type

Break Down the Problem

1. Identify the CSS pseudo-classes mentioned:
   • :first
   • :nth-child(1)
   • :first-child
   • :first-of-type
2. Determine the purpose of each pseudo-class and their selection criteria.

Relevant Concepts

1. :first-child: This pseudo-class matches an element that is the first child of its parent.
2. :nth-child(n): This pseudo-class matches elements based on their order among siblings. :nth-child(1) matches the first child as well.
3. :first-of-type: This pseudo-class matches the first occurrence of a given type of element among its siblings.

Analysis and Detail

• :first-child and :nth-child(1) are effectively equivalent in selecting the first child of any element.
• :first-of-type is more specific as it pertains to the type of element, making it applicable only to elements of the same type.

Verify and Summarize

• The correct pseudo-class that selects only the first child of an element is :first-child.
• While :nth-child(1) does select the first child, :first-child is more explicit in expressing this selection.

Final Answer

The correct CSS pseudo-class that selects only the first child of an element is :first-child.