How Can I Reliably Style the Last Child Element in a CSS List?

Targeting the Last Child with CSS

The task of styling the final element within a list can sometimes be challenging. Consider the following CSS rule:

#refundReasonMenu #nav li:last-child {
  border-bottom: 1px solid #b5b5b5;
}

Unfortunately, it fails to achieve its intended purpose. To understand why, we need to examine browser support for the :last-child pseudoclass.

Browser Support Limitations

Despite being a CSS3 standard, the :last-child pseudoclass still faces limitations in some browsers. Notably, Internet Explorer versions below 9 and Safari versions below 3.2 lack support for this selector.

Even in browsers that do support :last-child, such as Internet Explorer 7 and Safari 3.2, it's important to be aware that its counterpart, :first-child, is more widely supported in these browsers.

Alternative Solution

To overcome these limitations and reliably target the last child, it's recommended to explicitly add a unique class, such as "last-child," to the final list item and apply styling specifically to that class:

li.last-child {
  border-bottom: 1px solid #b5b5b5;
}

This approach provides consistent and reliable styling across a wider range of browsers.

The above is the detailed content of How Can I Reliably Style the Last Child Element in a CSS List?. For more information, please follow other related articles on the PHP Chinese website!