html - Is depth significant in CSS nested properties -

html - Is depth significant in CSS nested properties -

the title of question gives wrong idea, think, couldn't think of proper way word this...

let's have next html:

<div id="form-wrapper"> <form id="searchbox"> <table> <tr> <td><label for="searchterm">searchterm: </label></td> <td><input type="text" name="searchterm" /></td> </tr> <tr> <td><label for="name">name: </label></td> <td><input type="text" name="name" /></td> </tr> </table> </form> </div>

i want style table cells using css. valid this:

div#form-wrapper td { font-size: 14pt; }

instead of this:

div#form-wrapper form table tr td { font-size: 14pt; }

i think latter syntactically correct, since that's how html elements nested. know test in jsfiddle (which haven't, partially due languor), want know whether it's syntactically/semantically okay well, not if works or not.

thanks!

the latter more accurate , have higher importance due increased targets. both same stands in illustration if do

div#form-wrapper form table tr td { font-size: 16pt; } div#form-wrapper td { font-size: 14pt; }

the sec 1 wouldnt overwrite first due higher importance. first 1 requires td within form tag whereas sec 1 style td follows conditions , or isnt within form tag.

read this on css specificity explains how more targets = more specificity , hence higher importance.

html css syntax nested