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.


<!DOCTYPE html>

            .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;

        <div class="card-body">
                <li>Special Symbols</li>


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