Nth-child selector in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the :nth-child() selector do in CSS?

It selects elements based on their position among siblings in the parent element. For example, :nth-child(2) selects the second child element.

beginner

How would you select every even child element using :nth-child()?

Use :nth-child(even). This selects the 2nd, 4th, 6th, and so on children.

intermediate

What does :nth-child(3n+1) select?

It selects every 3rd element starting from the first child. So, 1st, 4th, 7th, 10th, etc.

beginner

True or False: :nth-child() counts only elements of a specific type.

False. :nth-child() counts all child elements regardless of type. To select specific types, use :nth-of-type().

beginner

How can :nth-child() help in creating striped table rows?

By selecting even or odd rows with tr:nth-child(even) or tr:nth-child(odd), you can style alternating rows differently for better readability.

Which CSS selector targets every 3rd child starting from the second child?

A :nth-child(3n-2)

B :nth-child(2n+3)

C :nth-child(2n+1)

D :nth-child(3n+2)

The formula 3n+2 selects children at positions 2, 5, 8, etc.

What does :nth-child(odd) select?

A All children at odd positions (1st, 3rd, 5th...)

B All children at even positions

C Only the first child

D Only the last child

odd matches 1, 3, 5, and so on.

If you want to style only the 4th child element, which selector do you use?

A :nth-child(even)

B :nth-child(3n)

C :nth-child(4)

D :nth-child(odd)

:nth-child(4) targets exactly the 4th child.

Does :nth-child() consider element types when counting children?

A Yes, it counts only elements of the same type

B No, it counts all child elements regardless of type

C It counts only text nodes

D It counts only elements with a class

:nth-child() counts all child elements, not filtered by type.

Which selector would you use to color every even row in a table?

A tr:nth-child(even)

B tr:nth-child(odd)

C tr:nth-of-type(odd)

D tr:nth-of-type(even)

tr:nth-child(even) selects even rows for styling.

Explain how the :nth-child() selector works and give an example of using a formula inside it.

Think about how you count items in a list and how formulas can pick certain positions.

Describe the difference between :nth-child() and :nth-of-type() selectors.

Consider if you want to select all children or only specific tags.