CSS: последний ребенок родительского

Question

:last-child прекрасно работает, когда все «дети» элементы одинаковы (то есть: все <p> «s или все <li>» s и правило применяется к этому типу ребенка

.

Но как я могу использовать CSS для выбора последнего «дочернего» элемента внутри родителя, который содержит различные элементы?

Например, в этом примере, как я могу применить правило к .parent, чтобы выбрать последний объект внутри это (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>

Answer 1

Вы можете использовать .parent > *:last-child или просто .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>