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