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:

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

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