CSS: the last child of the parent

Question

:last-childworks great when all the "children" are the same (i.e., all <p>or all <li>, and the rule applies to this type of child.

But how can I use CSS to select the last "child" element inside the parent that contains the various elements?

For example, in this example, how can I apply the rule to .parentto select the last object inside it ( 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>

Run codeHide result

Answer 1

You can use .parent > *:last-childor just.parent > :last-child

(*) - CSS. . , .

.parent > *:last-child {
  background-color: red;
}

<div class="parent">
  <p>First child</p>
  <input type="text" placeholder="Second child" />
  <div>Third child</div>
</div>

Hide result