As I continue to become more and more familiar with CSS, I find myself reading a lot about the Rules of Cascading and Specificity and order the Precedence.
Once and for all, I’d like to get a straight answer on various examples I’ve seen regarding duplicate selectors.
I’ll type up an example below:
[code]i {
color: green;}
i {
color: red;}
p b {
color: blue !important;}
p b {
color: violet;}[/code]
Okay, so I understand that based on how the rules of cascading work: A) The first duplicate pair of selectors, the latter of the two rules will take precedence; B) In the second pair, the first selector will applied due to the !important being added after the value of the color property (which I’m told is not something you really want to use if you don’t have to).
So, my question, and where I’m trying to get a better understanding is, why would we even allow more than one of the same selector if one ends up being overridden by the other?
Is there a chance that the !important rule will be overridden by the latter rule in some cases? Or is there a chance that the former i { } rule will be applied before the latter instead? It is my assumption that if you wanted to apply something to say a
element, but not others, you’d assign it a very specific ID.
To have multiple selectors that are overridden when following the rules of precedence in CSS seems like it’s just cluttering up the code.
I’ve yet to find a clear answer (to me anyway), that explains it.
Thanks!
