CSS Last 3 Childs

CSS Last 3 Childs is a selector that targets the last three child elements of a parent element. It can be useful for styling the last few elements in a group, such as a list, without having to individually target each element.

Syntax

The syntax for the CSS Last 3 Childs selector is as follows:

parent:last-child,
parent:nth-last-child(-n + 3)

The :last-child pseudo-class selects the last child element of the parent, while the :nth-last-child(-n + 3) pseudo-class selects the last three child elements.

Example

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
    <li>Fifth item</li>
</ul>

<style>
    /* Selects the last three child elements (4th, 5th, and 6th) */
    li:nth-last-child(-n + 3) {
        background-color: #f3f3f3;
    }
</style>

In the example above, the li:nth-last-child(-n + 3) selector targets the last three li elements in the ul list and applies a background color of #f3f3f3.

Browser Support

The CSS Last 3 Childs selector is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. It is not supported by Internet Explorer.

Conclusion

The CSS Last 3 Childs selector is a useful tool for styling the last few elements in a group without having to individually target each element. By using this selector, you can quickly and easily apply styles to the desired elements, improving the efficiency of your CSS code.