How does the CSS specificity work? -
this question has answer here:
- points in css specificity 7 answers
i have css classes chained. can 1 explain how following code works? displays text green. can explain?
<html> <head> <style> .a .c { color: red; } .b .c { color: green; } .c { color: blue; } </style> </head> <body> <div class="a"> <div class="b"> <div class="c"> hi </div> </div> </div> </body> </html>
the first says item class c inside of item of class a colored red.
.a .c { color: red; } the second says item class c inside of item of class b colored green. takes precedence on first rule deep first rule, defined after rule.
.b .c { color: green; } this says item class c should blue. since not descriptive rules above, does not take precedence. if have item class c is not nested inside class a or b, rule take effect.
.c { color: blue; } so there 2 rules remember:
- the more specific rules higher precedence
- the later defined rules higher precedence just-as-specific counterparts.
Comments
Post a Comment