First-child and last-child in CSS - Deep Dive

Overview - First-child and last-child

What is it?

First-child and last-child are CSS selectors that let you style elements based on their position among siblings. The first-child selector targets the very first element inside a parent, while last-child targets the very last element. They help you apply special styles without adding extra classes or IDs.

Why it matters

Without these selectors, you would need to add extra code or classes to style the first or last items differently, making your HTML messy and harder to maintain. These selectors make styling cleaner and more efficient, improving both design and developer experience.

Where it fits

Before learning these selectors, you should understand basic CSS selectors and the HTML structure of parent and child elements. After mastering them, you can explore more advanced CSS selectors like nth-child, nth-of-type, and combinators for complex styling.

Mental Model

Core Idea

First-child and last-child selectors pick out the very first or very last sibling element inside a parent to style it uniquely.

Think of it like...

Imagine a row of books on a shelf: first-child is like the book on the far left, last-child is the book on the far right. You can paint just those books a different color without touching the others.

Parent Element
┌─────────────────────────┐
│ Child 1 (first-child)   │ ← styled by :first-child
│ Child 2                 │
│ Child 3                 │
│ Child N (last-child)    │ ← styled by :last-child
└─────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Parent and Child Elements

Concept: Learn what parent and child elements are in HTML structure.

In HTML, elements can contain other elements inside them. The container is called the parent, and the elements inside are children. For example, a

is a parent of
• items.

Result

You can identify which elements are siblings (children of the same parent) and their order.

Understanding the parent-child relationship is essential because first-child and last-child selectors depend on this structure to work.

2

Foundation

Basic CSS Selectors Refresher

Concept: Review how CSS selectors target elements by tag, class, or ID.

CSS selectors let you pick elements to style. For example, 'p' selects all paragraphs, '.highlight' selects elements with class 'highlight', and '#main' selects the element with ID 'main'.

Result

You can write CSS rules that apply styles to specific elements.

Knowing basic selectors helps you understand how :first-child and :last-child add positional filtering on top of these.

3

Intermediate

Using :first-child Selector

🤔Before reading on: do you think :first-child selects the first element of a type or just the very first child regardless of type? Commit to your answer.

Concept: :first-child selects the very first child element of its parent, no matter its type.

The :first-child selector matches an element only if it is the first child of its parent. For example, 'li:first-child' styles the first

inside a

or
. If the first child is a different tag, the selector won't match other elements.

Result

Only the very first child element gets the style, even if other siblings have the same tag.

Understanding that :first-child depends on position, not type, prevents confusion when elements of different tags are mixed.

4

Intermediate

Using :last-child Selector

🤔Before reading on: does :last-child select the last element of a specific type or the last child regardless of type? Commit to your answer.

Concept: :last-child selects the very last child element of its parent, regardless of its tag.

The :last-child selector matches an element only if it is the last child of its parent. For example, 'p:last-child' styles a

only if it is the last child inside its parent container.

Result

Only the last child element receives the style, even if siblings have different tags.

Knowing that :last-child is about position, not element type, helps avoid styling mistakes in mixed content.

5

Intermediate

Combining with Other Selectors

🤔Before reading on: can you combine :first-child with class selectors to style only the first child of a certain class? Commit to your answer.

Concept: You can combine :first-child and :last-child with other selectors like classes or tags to target specific elements precisely.

For example, 'li.first-item:first-child' styles an

with class 'first-item' only if it is the first child. This lets you be very specific about which elements get styled.

Result

You gain fine control over styling by combining positional and attribute selectors.

Combining selectors allows you to write cleaner CSS and avoid adding extra classes just for styling first or last items.

6

Advanced

Limitations with Text Nodes and Comments

🤔Before reading on: do you think :first-child ignores text nodes and comments when determining the first child? Commit to your answer.

Concept: :first-child and :last-child consider only element nodes, ignoring text nodes and comments in the DOM.

Even if there is whitespace or comments before an element, :first-child matches the first element node, not the first node of any type. This can cause confusion if you expect it to count text or comment nodes.

Result

Styles apply correctly to the first or last element, but not to whitespace or comments.

Knowing this prevents bugs where styles seem not to apply because of invisible nodes in the HTML.

7

Expert

Performance and Specificity Considerations

🤔Before reading on: do you think :first-child and :last-child selectors are slower than class selectors? Commit to your answer.

Concept: These selectors are efficient but can affect CSS specificity and cascade, influencing which styles win when conflicts occur.

:first-child and :last-child have the same specificity as a type selector plus a pseudo-class, which is higher than just a type selector but lower than an ID. Overusing them in complex selectors can impact rendering performance and debugging.

Result

You can write performant CSS but must manage specificity carefully to avoid unexpected style overrides.

Understanding specificity and performance helps write scalable CSS that behaves predictably in large projects.

Under the Hood

:first-child and :last-child work by the browser's rendering engine inspecting the DOM tree. They check the position of an element among its siblings, counting only element nodes, ignoring text and comment nodes. When an element matches the position criteria, the browser applies the CSS rules associated with these selectors during style calculation.

Why designed this way?

These selectors were designed to allow styling based on document structure without extra markup. Ignoring non-element nodes simplifies the model and matches common developer expectations. Alternatives like adding classes for first or last elements would clutter HTML and reduce maintainability.

Parent Element
┌─────────────────────────────┐
│ [Text Node] (ignored)       │
│ ┌─────────────────────────┐ │
│ │ Element 1 (first-child) │◄┤ matched by :first-child
│ └─────────────────────────┘ │
│ [Comment Node] (ignored)    │
│ ┌─────────────────────────┐ │
│ │ Element N (last-child)  │◄┤ matched by :last-child
│ └─────────────────────────┘ │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does :first-child select the first element of a specific type or just the very first child? Commit to your answer.

Common Belief: :first-child selects the first element of a given type regardless of its position.

Reality: :first-child selects the very first child element of any type inside the parent, not the first of a specific type.

Why it matters: Misunderstanding this causes styles to not apply as expected when the first child is a different tag.

Quick: Does :last-child count text nodes or comments when deciding the last child? Commit to your answer.

Common Belief: :last-child counts all nodes including text and comments to find the last child.

Reality: :last-child only counts element nodes, ignoring text and comments.

Why it matters: This can confuse developers when whitespace or comments appear to break styling.

Quick: Can you use :first-child to select the first child of a class anywhere in the document? Commit to your answer.

Common Belief: :first-child selects the first element with a class anywhere, like a global filter.

Reality: :first-child only selects elements that are the first child of their parent, not globally by class.

Why it matters: This misconception leads to incorrect CSS that doesn't style the intended elements.

Quick: Is :first-child always faster than class selectors? Commit to your answer.

Common Belief: :first-child selectors are always faster than class selectors because they are simpler.

Reality: Class selectors are generally faster; :first-child requires checking element position in the DOM, which can be more complex.

Why it matters: Ignoring performance differences can cause slow rendering in large or complex pages.

Expert Zone

1

The :first-child and :last-child selectors only consider element nodes, so invisible text nodes or comments do not affect their matching, which can surprise developers inspecting the DOM.

2

Combining :first-child or :last-child with other pseudo-classes like :not() or attribute selectors can create very precise and powerful styling rules used in complex UI components.

3

In CSS specificity, :first-child and :last-child add a pseudo-class weight, which can cause unexpected overrides if not carefully managed alongside classes and IDs.

When NOT to use

Avoid using :first-child and :last-child when you need to style elements based on their type order rather than position; use :nth-of-type or JavaScript instead. Also, for dynamic content where elements are frequently added or removed, relying solely on these selectors can cause inconsistent styling.

Production Patterns

In production, these selectors are commonly used to style lists, menus, and grids where the first or last item needs special borders, spacing, or colors. They reduce the need for extra markup and keep CSS maintainable. They are often combined with responsive design techniques to adjust layouts on different screen sizes.

Connections

nth-child Selector

Builds-on

Understanding :first-child and :last-child lays the foundation for mastering :nth-child, which generalizes positional styling to any child number.

DOM Tree Structure

Depends on

Knowing how the DOM tree organizes elements as parent and children is crucial to correctly using positional selectors like :first-child and :last-child.

Queueing Theory (Operations Research)

Analogous pattern

Just as :first-child and :last-child identify the first and last items in a sequence, queueing theory studies the order of items in lines, showing how position affects processing and priority.

Common Pitfalls

#1 Styling the first element of a type incorrectly using :first-child.

Wrong approach:

li:first-child { color: red; } /* expects to style first li but fails if first child is not li */

Correct approach:

li:first-of-type { color: red; } /* correctly styles the first li regardless of other siblings */

Root cause:

Confusing :first-child (position-based) with :first-of-type (type-based) selectors.

#2 Expecting :last-child to style an element when whitespace or comments follow it.

Wrong approach:

p:last-child { font-weight: bold; } /* no effect if last child is a comment or text node */

Correct approach:

Ensure the element is truly the last element node or use JavaScript for complex cases.

Root cause:

Misunderstanding that :last-child ignores non-element nodes.

#3 Using :first-child on elements that are not the first child, expecting styling.

Wrong approach:

div:first-child { background: yellow; } /* no effect if div is not first child */

Correct approach:

Add a class or use :nth-child(n) if targeting other positions.

Root cause:

Assuming :first-child matches elements by type or class rather than position.

Key Takeaways

:first-child and :last-child select elements based on their exact position among siblings, not their type or class.

These selectors only consider element nodes, ignoring text and comment nodes, which can affect matching in subtle ways.

Combining these selectors with other CSS selectors allows precise and maintainable styling without extra HTML markup.

Understanding their specificity and performance implications helps write efficient and predictable CSS.

Knowing when to use these selectors versus alternatives like :first-of-type or JavaScript is key to robust web design.