First-child and last-child in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the color of the first list item

Given the CSS below, what color will the first

inside the

have when rendered in the browser?

CSS

ul li:first-child { color: red; }
ul li:last-child { color: blue; }

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

A Green

B Blue

C Red

D Black (default color)

💡 Hint

Remember, :first-child targets the very first child element of its parent.

The selector ul li:first-child targets the first

inside the

. It sets its color to red. So the first list item 'Apple' will be red.

❓ selector

intermediate

Which element is selected by :last-child?

Consider the HTML and CSS below. Which element will have a blue background color?

CSS

div p:last-child { background-color: blue; }

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <span>Span element</span>
</div>

A Paragraph 2

B No element is selected

C Span element

D Paragraph 1

💡 Hint

:last-child selects the last child of the parent, regardless of type.

The last child inside the div is the span element, not a p. Since the selector is div p:last-child, it looks for a p that is the last child. There is none, so no p is selected. The span is last child but not a p.

🧠 Conceptual

advanced

Difference between :first-child and :first-of-type

Which statement correctly explains the difference between :first-child and :first-of-type selectors?

A <code>:first-child</code> selects the last child; <code>:first-of-type</code> selects the first child.

B <code>:first-child</code> selects the first element of its type; <code>:first-of-type</code> selects the first child of the parent.

C <code>:first-child</code> and <code>:first-of-type</code> select the same elements always.

D <code>:first-child</code> selects the first child of its parent regardless of type; <code>:first-of-type</code> selects the first sibling of its type.

💡 Hint

Think about whether the selector cares about the element type or just position.

:first-child matches an element only if it is the very first child of its parent, no matter what type it is. :first-of-type matches the first sibling of its own type, even if it is not the first child overall.

❓ layout

advanced

Styling first and last items in a flex container

You have a horizontal menu using flexbox. You want the first menu item to have extra left padding and the last menu item to have extra right padding. Which CSS will achieve this?

CSS

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li:first-child {
  padding-left: 2rem;
}

nav ul li:last-child {
  padding-right: 2rem;
}

A Use :first-child and :last-child selectors on the <li> elements inside the flex container.

B Use :first-of-type and :last-of-type selectors on the <ul> element.

C Add padding to the <nav> element instead of the <li> elements.

D Use JavaScript to add classes to first and last items and style those classes.

💡 Hint

Think about which elements are the flex items and how to target them with CSS selectors.

The flex container is the ul. Its direct children li are flex items. Using :first-child and :last-child on li targets the first and last menu items for styling.

❓ accessibility

expert

Accessibility impact of styling only first-child and last-child

If you style only the first and last items in a navigation list with different colors using :first-child and :last-child, what accessibility concern might arise?

A Users relying on keyboard navigation might not perceive the difference if color contrast is insufficient or color is the only cue.

B The first and last items will not be focusable by keyboard.

C The page will fail HTML validation due to use of :first-child and :last-child selectors.

D Screen readers will ignore the first and last items because of the CSS selectors.

💡 Hint

Think about how color-only styling affects users with visual impairments or color blindness.

Using color alone to differentiate elements can cause issues for users with color blindness or low vision. Keyboard users might not notice visual differences if focus styles are missing. It's important to ensure sufficient contrast and provide multiple cues beyond color.