Learn HTML
<ul id="tree">
<li>
<label>
<input type="checkbox" /> Level 1 - 1</label>
</li>
<li>
<label>
<input type="checkbox" /> Level 1 - 2</label>
<ul>
<li>
<label>
<input type="checkbox" /> Level 2 - 1</label>
<ul>
<li>
<label>
<input type="checkbox" /> Level 3 - 1</label>
</li>
<li>
<label>
<input type="checkbox" /> Level 3 - 2</label>
<ul>
<li>
<label>
<input type="checkbox" /> Level 4 - 1</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<li>
<label>
<input type="checkbox" /> Level 1 - 3</label>
</li>
<li>
<label>
<input type="checkbox" /> Level 1 - 4</label>
</li>
</li>
</ul>
CSS Styling
* :not(#tree){padding:0px}
The author wants to set padding to zero for all elements except #tree. However, the code * :not(#tree){padding:0px} ends up setting padding zero for li, label, and input elements as well. How can we exclude child elements of #tree from having padding zero?
Reference: Original jsfiddle link and desired outcome: Updated version