:last-child
works great when all of the "children" elements are the same (ie: all <p>
's or all <li>
's and the rule is applied to that type of child.
But how can I use CSS to select the last "child" element inside a parent which contains varying elements?
For instance, in this example, how could I apply a rule to the .parent
to select the last object inside of it (the div
)?
.parent:last-child {
background-color: red;
}
<div class="parent">
<p>First child</p>
<input type="text" placeholder="Second child" />
<div>Third child</div>
</div>
The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
In this CSS :last-child example, the last row (ie: the last <tr> tag) will have a yellow background color. All other rows in the table will not be styled by the :last-child selector.
You can use .parent > *:last-child
or just .parent > :last-child
An asterisk (*) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect.
.parent > *:last-child { background-color: red; }
<div class="parent"> <p>First child</p> <input type="text" placeholder="Second child" /> <div>Third child</div> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With