Первый детский выбор

Question

В этом упражнении мне было любопытно узнать, как работает селектор первого ребенка. Попробуйте выбрать тег h1 и придать ему цвет, например.

.col1:first-child { 
 
    color: green; 
 
}

<div class="col1"> 
 
    <h1> This is something awesome!</h1> 
 
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorlike).</p> 
 
    <button type="button" class="button">Click Me!</button> 
 
</div>

Примечание: Вопрос касается только первого ребенка и как он на самом деле работает, как я думаю, что h1 является первым ребенком сНа col1, но без эффекта.

Answer 1

.col1:first-child означает «Сотрудник col1, который является первым потомком своего родителя » нет «Первый ребенок из каждого элемента, который является членом col1».

Для этого вам нужно вставить ребенка комбинатор:

.col1 > :first-child {}