First-child and last-child in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS selector :first-child do?

It selects the very first child element inside its parent element.

beginner

What does the CSS selector :last-child do?

It selects the very last child element inside its parent element.

intermediate

Can :first-child select the first element of a specific type only?

No, :first-child selects the first child regardless of its type. To select the first of a specific type, use :first-of-type.

beginner

How would you style only the first paragraph inside a <div> using :first-child?

Use div p:first-child { /* styles */ }. This styles a p only if it is the first child of the div.

beginner

What happens if you use :last-child on an element that is not the last child?

The style will not apply because :last-child only matches elements that are the last child of their parent.

Which CSS selector targets the first child element of its parent?

A :first-child

B :last-child

C :nth-child(2)

D :only-child

:first-child selects the first child element inside its parent.

What does li:last-child select?

A The last <code>li</code> inside its parent

B All <code>li</code> elements

C The first <code>li</code> inside its parent

D Only <code>li</code> elements with no siblings

li:last-child selects the li element that is the last child of its parent.

If a p is the second child of a div, will div p:first-child style it?

A Yes, always

B No, only if it is the first child

C Yes, if it is the only <code>p</code>

D No, it styles the last child

:first-child matches only if the element is the first child of its parent.

Which selector would style the last li in a list?

A li:first-child

B li:nth-child(1)

C li:last-child

D li:only-child

li:last-child targets the last li inside its parent.

What is true about :first-child and :last-child selectors?

A They select all children of a parent.

B They select elements by their class name.

C They select elements by their ID.

D They select elements based on their position among siblings.

Both selectors select elements based on their position as first or last child among siblings.

Explain how the :first-child and :last-child selectors work in CSS.

Think about how these selectors depend on the element's position among siblings.

Describe a real-life example where you would use :first-child or :last-child in styling a webpage.

Consider menus, lists, or groups of items on a page.