How Does CSS `:last-child` Selector Work, and What Are the Alternatives?

CSS :last-child Selector Specificity

Background:

The :last-child selector targets the last child element of a specific parent element. However, it requires the child element to be the very last element in that container.

Explanation:

Consider the following CSS selector:

li.complete:last-child {
  background-color: yellow;
}

This selector will not apply the specified styling to the last element with the "complete" class if there are any other elements present after it. For instance, in the HTML provided:

• 1
• 2
• 3
• 4

The :last-child selector will not apply the yellow background to the second "complete" list item because it is not the last element in the list.

Alternatives:

If you need to apply styling to the last element with a specific class, regardless of its position within the container, you can use :last-of-type instead:

li.complete:last-of-type {
  background-color: yellow;
}

This selector will target the last element that matches the "complete" class, even if there are other elements after it.

Additionally, you can use the "nth-child" selector to target the last element of a specific type:

ul :nth-child(4) {
  background-color: yellow;
}

This will select the fourth list item, regardless of its class.

jQuery Considerations:

The jQuery selector $("li.complete:last-child") will not work because it is looking for the very last element in the parent element. To target the last element with a specific class using jQuery, you can use the "last" function:

$("li.complete").last();

Conclusion:

The :last-child selector requires the element to be the very last child in the parent element. If that is not the case, :last-of-type or "nth-child" may provide more suitable options.

The above is the detailed content of How Does CSS `:last-child` Selector Work, and What Are the Alternatives?. For more information, please follow other related articles on the PHP Chinese website!