i have this snippet of html and css:
<body><style>
#g .b .c .e { color: green; }
.b .c #f { color: red; }</style><div class="a" id="g"><div class="b"><div class="c"><div class="e" id="f">hello</div></div></div></div></body>Then text hello shows up as green. Why is it not red? the rules target the same element but the red declaration came after the green one. Doesn't later definitions override the previous?
p.s - i'm more of a left-brained person. I'm a front end developer but mainly on the programmatic side of things; i haven't delved too deep into UI/UX and CSS stuff.