: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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.