How to Style the Last List Item in CSS While Maintaining Cross-Browser Compatibility?

Applying CSS to the Last List Item with :last-child

In an attempt to style only the last list item (

) within a navigation menu, the following code is used:

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

However, this approach fails to select the last list item. The issue stems from limited browser support for the :last-child pseudoclass.

Browser Compatibility Concerns

Despite its widespread use in modern browsers, :last-child is not universally supported. Internet Explorer versions prior to 9 and Safari versions before 3.2 notably do not support it.

Alternative Solution

To address this compatibility issue, it is advisable to explicitly add a last-child or similar class to the desired list item and apply styles to li.last-child instead. This method ensures compatibility across various browsers:

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

The above is the detailed content of How to Style the Last List Item in CSS While Maintaining Cross-Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!