How can you style only the last element of a list using pseudo-classes?

Q: How can you style only the last element of a list using pseudo-classes?

To style only the last element of a list, CSS provides the `:last-child` pseudo-class. It targets the last child element within its parent container. `:last-child` – Selects the last element among its siblings. Works with any element type, not just list items. Can be combined with other selectors for more precise targeting. /* Style only the last list item */ ul li:last-child { background-color: lightcoral; font-weight: bold; color: white; } Item 1 Item 2 Item 3 Item 4 In this example, only the last ` ` (Item 4) receives the light coral background, bold text, and white color, clearly distinguishing it from the other list items. Use `:last-child` when you want to target the final element of a container without adding extra classes or IDs. Combine with other pseudo-classes like `:not()` or `:nth-last-child()` for more complex patterns. Be aware that dynamic changes to the list (adding/removing items) will affect which element is considered the last. Test across browsers, as `:last-child` is widely supported but interactions with other pseudo-classes may need verification.

Difficulty: 3/10

pseudo-classes, CSS selectors, list styling

Styling the Last Element of a List with :last-child

To style only the last element of a list, CSS provides the :last-child pseudo-class. It targets the last child element within its parent container.

Key Points About :last-child

1
:last-child – Selects the last element among its siblings.
2
Works with any element type, not just list items.
3

How can you style only the last element of a list using pseudo-classes?

Styling the Last Element of a List with :last-child

Scenario Questions

Follow-up Questions