Okay, I'll try and keep this simple. I've begun looking into more complex CSS setups and I have a question about hierarchy. What's the easiest way to determine where a setting lies?
I have the following piece of HTML code.
I also have CSS code that formats this HTML such as (I removed some code to simplify what is there)
Now if I introduce some CSS for the ID of someID2 it has no effect (whether I place it before or after the assignment above)
I would have thought that a specific ID such as this would override any other CSS assignment (unless an inline CSS). What is the easiest way to determine how to set up additional CSSs that will take effect? I'm pretty sure I know why this is happening but I'd like to hear suggestions / reasons from other people without my thoughts influencing potential comments. TIA.
I was thinking that it but in a way it isn’t :-) one says multiple elements under an id but another is a specific id only, not “generic” underneath. If I have 3 levels of elements but one if’s doesn’t an element type nested which would be chosen? The more levels or the one having an id included? Thanks Bear as well ;-)
If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.
The universal selector (*) has low specificity, while ID selectors are highly specific!
For Better knowledge look for these following links: