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.


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