CSS Select Last Child Element

Sometimes while coding, a situation arises where the last child of the parent element needs to be selected to apply a specific style. For example, removing the margin-bottom from the last child element is necessary to show proper space in the parent element. The following CSS code example shows how to select the last child element of a parent HTML element: To remove border-bottom only from the last paragraph:

p:last-child {
    border-bottom: 0;
}

To remove the bottom margin from any child element:

.parent > *:last-child {
    margin-bottom: 0;
}

Please read the CSS Universal Selector article to learn about the universal selector with an asterisk symbol.

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            .card-body {
                border: .031rem solid #bce8f1;
                box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
                padding: .5rem;
            }
            .card-body ol {
                margin: 0;
            }
            .card-body ol li {
                margin-bottom: 1rem;
            }
            .card-body ol li:last-child {
                margin-bottom: 0;
            }
        </style>
    </head>

    <body>
        <div class="card-body">
            <ol>
                <li>Identifiers</li>
                <li>Keywords</li>
                <li>Constants</li>
                <li>Strings</li>
                <li>Operators</li>
                <li>Special Symbols</li>
            </ol>
        </div>
    </body>

</html>

The above example removes the margin-bottom from the last <li> element so that the space in the parent element appears appropriately.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram
Keep W3schools Growing with Your Support!
❤️ Support W3schools