CSS selector for the first element after another not being siblings

Question

I wonder if this is even possible. With this html:

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

I know I can do:

label:first-child{}

but I wonder if it is possible to select only the first label preceded by a h1 that is not at the same level with + or ~ or something else.

Answer 1

You can use the below selector:

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

So the above selector will select the form element which is a sibling of h1 and than it gets in and selects the first direct label element and hence am using >

You can safely get rid of the > if you are sure that you might not have any further nested label elements inside your form element.

---

Note that this is a very generic tag selector, I will suggest you to wrap your elements inside a wrapper element and give it a class say form-wrapper and modify your selector like

.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>