html - Why ID has stronger meaning than Class in CSS styling even if declared before the Class -
this question has answer here:
if declare in css file(or inside <style> </style> tags) firstly id of element , classname of same element, id styling applied, regardless fact classname latest 1 in order.
i want know why happening , if has naming, please tell.
just make more clear, take @ example, please:
div { height:100px; width:150px; border:1px solid #000; margin:0 auto; } #theid { background:#090; } .theclass { background:#00f; } <div id="theid" class="theclass"></div>
this complicated world of "specificity"...
id's more specific classes , take precedence on them. because id's have unique on every page...so nature specific. classes can appear multiple times.
learning how works fundamental coding css. people should try avoid using id's altogether specific tend cut down reuse.
a rule of thumb might use id's identify large sections of page, or important items , classes attach styles other things.
these days html5 have <section>, <header> , <footer> whereas used use div's (with id's normally) these days id used less ever since can target things directly.
however consider id-ing sections: <section id="maincontent"> example standard thing do.
there no rules how (excuse pun) use id's , classes. conventions have built on time.
see: https://developer.mozilla.org/en/docs/web/css/specificity ... here section:
the concept
specificity means browsers decide css property values relevant element and, therefore, applied. specificity based on matching rules composed of different sorts of css selectors.
how calculated?
specificity weight applied given css declaration, determined number of each selector type in matching selector. when specificity equal of multiple declarations, last declaration found in css applied element. specificity applies when same element targeted multiple declarations. per css rules, directly targeted element take precedence on rules element inherits ancestor.
Comments
Post a Comment