Can I have an <input> and <label> with different parent elements?

Question

For example:

<input type="checkbox" id="nav-toggle" />

<nav>
    Nav stuff
</nav>

<main>
   <label for="nav-toggle">Menu</label>
</main>

For use in an a css only menu panel like this: http://codepen.io/jimahyland/pen/mAVGmj

It seems to work fine, but is there anything fundamentally wrong with this approach?

Answer 1

Yes, input and label can have different parents.

Most standard block-level elements, such as body, div, article, section and aside, accept flow content, which includes input and label.

As long as the parent accepts flow content or phrasing content, input and label can exist as a child element.