Selettore CSS per il primo elemento dopo l'altro non essendo fratelli

Question

Mi chiedo se questo sia possibile. Con questo html:

<h1></h1> 
<form> 
    <label><input type="text"></label> 
    <label><input type="text"></label> 
    <label><input type="text"></label> 
</form> 

so che posso fare:

label:first-child{} 

ma mi chiedo se è possibile selezionare solo la prima etichetta preceduta da un h1 che non è allo stesso livello con + o ~ o qualcos'altro.

Answer 1

È possibile utilizzare il selettore di seguito:

h1 + form > label:first-child { 
    /* some properties here */ 
} 

Così il sopra selettore si seleziona l'elemento form che è un fratello di h1 e di quello che entra e seleziona il primo label elemento diretta e quindi sto usando >

È possibile eliminare in modo sicuro > se si è certi di non disporre di ulteriori elementi nidificati all'interno dell'elemento form.

---

Si noti che questo è un selettore di tag molto generico, io vi suggerisco di avvolgere gli elementi all'interno di un elemento di involucro e dargli un class dire form-wrapper e modificare il selettore come

.form-wrapper h1 + form > label:first-child { 
    /* some stuff */ 
} 

Answer 2

h1 + form label:first-child { 
 
    color: red; 
 
}

<h1>H1</h1> 
 
<form> 
 
    <label>First</label> 
 
    <label>Second</label> 
 
    <label>Third</label> 
 
</form> 
 

 
<h2>H2</h2> 
 
<form> 
 
    <label>First</label> 
 
    <label>Second</label> 
 
    <label>Third</label> 
 
</form>

Answer 3

È possibile accedere al successivo fratello utilizzando + e quindi utilizzare il selettore discendente per individuare l'etichetta.

h1 + form label:first-child { 
 
    padding-right: 120px; 
 
}

<h1></h1> 
 
<form> 
 
    <label> 
 
    <input type="text"> 
 
    </label> 
 
    <label> 
 
    <input type="text"> 
 
    </label> 
 
    <label> 
 
    <input type="text"> 
 
    </label> 
 
</form>