Задайте первый ярлык с помощью CSS

Question

Я разрабатываю портал, где я не могу изменить какой-либо HTML, но CSS, и натолкнулся на следующий бит кода, и я хочу настроить таргетинг на первый ярлык (Ваше имя).

<form class="no-tables" name="" action="" method="post"> 
    <div> 
     <input type="hidden" name="" value="1"> 
     <label>Your Name</label> 
     <label>Your Age</label> 
    </div> 
</form> 

Я пробовал выбор шеврона и первого ребенка, но ни один из них не работает.

Answer 1

Попробуйте использовать first-of-type:

/* CSS3 */ 
 
form.no-tables > div > label:first-of-type { 
 
    background: red; 
 
} 
 

 
/* or with CSS2 */ 
 
form.no-tables > div > input + label { 
 
    border: 1px solid black; 
 
}

<form class="no-tables" name="" action="" method="post"> 
 
    <div> 
 
    <input type="hidden" name="" value="1"> 
 
    <label>Your Name</label> 
 
    <label>Your Age</label> 
 
    </div> 
 
</form>

Answer 2

Вы можете сделать это с помощью input + label только CSS2.

Редактировать So fcalderan упомянул об этом уже.

input + label { 
 
    background-color: blue; 
 
}

<form class="no-tables" name="" action="" method="post"> 
 
    <div> 
 
     <input type="hidden" name="" value="1"> 
 
     <label>Your Name</label> 
 
     <label>Your Age</label> 
 
    </div> 
 
</form>