Deep Dive into CSS :last-child Selector: Why It Doesn't Select the Last Element with a Specific Class

Core Mechanism of CSS :last-child Selector

In CSS selectors, the :last-child pseudo-class selector is used to select the last child element of a parent element. However, many developers encounter a common issue: when attempting to select the last child element with a specific class, the selector appears not to work properly. This stems from a misunderstanding of how :last-child operates.

Strict Matching Conditions of :last-child Selector

The :last-child selector operates under strict conditions: it only selects elements that are indeed the last child of their parent element. This means the selector li.complete:last-child does not select "the last li element with the complete class," but rather selects "an element that is both an li element, has the complete class, and is the last child of its parent element."

Consider the following HTML structure:

<ul>
    <li class="complete">1</li>
    <li class="complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

In this example, the li.complete:last-child selector will not match any elements because the last li element (number 4) does not have the complete class. This selector would only work if the last li element also had the complete class.

Parsing Order of Compound Selectors

Understanding the parsing order of compound selectors is crucial. For a selector like li.complete:last-child, the browser first finds all elements that are the last child of their parent, then filters this result set to include only those that are li elements with the complete class. The parsing is not a linear left-to-right process but follows specific matching rules.

The following example demonstrates matching results of different compound selectors:

.parent :last-child { /* Selects all last child elements within .parent */
    font-weight: bold;
}

.parent div:last-child { /* Selects the last child of .parent only if it is a div */
    background: crimson;
}

.parent div.child-2:last-child { /* Selects the last child of .parent only if it is a div and has class child-2 */
    color: beige;
}

Difference Between :last-of-type and :last-child

Unlike :last-child, the :last-of-type selector selects the last element of a specific type within its parent. In the original problem, li.complete:last-of-type also won't match because the last li element (number 4) doesn't have the complete class.

However, .complete:first-of-type works in the original example because the first li element with the complete class happens to be the first element of type li. If we add an li element without the complete class at the beginning of the ul, .complete:first-of-type would also fail.

Behavioral Differences in jQuery Selectors

In jQuery, the selector $("li.complete:last-child") behaves consistently with CSS selectors since it's based on the same selector specification. This selector won't match any elements in the original example because the last child element is not li.complete.

In contrast, $("li.complete").last() works correctly because it follows different logic: first select all li.complete elements, then return the last element from this collection. This approach doesn't depend on the element's position within its parent but rather on the order within the matched collection.

Practical Application Recommendations

In practical development, when needing to select the last element with a specific class, consider the following approaches:

1. Use JavaScript or jQuery collection methods like $("li.complete").last()
2. If possible, adjust the HTML structure so the target element becomes the last child of its parent
3. Use CSS custom properties or data attributes combined with other selection strategies
4. Consider using :nth-last-child() or :nth-last-of-type() selectors for more precise control

Conclusion

The :last-child selector strictly adheres to its definition: it only selects elements that are indeed the last child of their parent element. When combined with class selectors, it requires the target element to satisfy both conditions: having the specified class and being the last child of its parent. Understanding this mechanism is crucial for correctly using CSS selectors and avoiding common development pitfalls.