親要素が異なる<input>と<label>を使用できますか？

Question

たとえば

：このようなCSSのみメニューパネルで使用するために

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

<nav> 
    Nav stuff 
</nav> 

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

：http://codepen.io/jimahyland/pen/mAVGmj

正常に動作するようですが、このアプローチには根本的に間違っているものはありますか？

Answer 1

はい、inputとlabelは異なる親を持つことができます。そのようなbody、div、article、sectionとasideなど

最も標準的なブロックレベル要素は、inputとlabelを含むflow contentを受け入れます。

親がフローコンテンツを受け入れる限り、phrasing content、inputおよびlabelは子要素として存在できます。