html - CSS selector for the first element after another not being siblings -


i wonder if possible. html:

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

i know can do:

label:first-child{} 

but wonder if possible select first label preceded h1 not @ same level + or ~ or else.

you can use below selector:

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

so above selector select form element sibling of h1 , gets in , selects first direct label element , hence using >

you can safely rid of > if sure might not have further nested label elements inside form element.


note generic tag selector, suggest wrap elements inside wrapper element , give class form-wrapper , modify selector like

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

Comments