Hmm, Firefox gives me red text. I guess id is more “powerful”.
IDs are “weighty”… which can be a pain in the bohunkus especially for new coders who are already having problems grasping the concepts of cascade and specificity.
…but I disagree that it doesn’t matter. I recommend keeping an open mind and trying both techniques.
You misunderstood me, I think. I don’t recollect saying it doesn’t matter. I am hugely open to the idea of doing things “better” and I was merely speculating that there might be some potential to manipulating classes/IDs to achieve some (unknown to me) end. It was an interesting idea that I plan to explore further.
Hmmm, I just tried to force it . Wrapping in a couple of divs with classes didn’t, but inserting a p did.
<style type="text/css">
#uno {color:#f00;}
div.dos p {color:#00f;}
</style>
...
<div id="uno" class="dos"><p>This is test text</p></div>
Sigh, I should leave CSS to experts like you.
*where is that darn star wars meme now that I want to look at it again
No, I didn’t misunderstand you. Sorry to convey that impression. I was reflecting back on Ryan’s assertion that “it does not matter”, because I believe that it does matter as I expressed in post #22.
We usually manipulate or choose between IDs and classes to achieve the most efficient code. In my case, my choices lean toward (1) minimizing opportunities for coding errors and (2) the efficient application of styles. To that end, classes work best for me.
With that interest in exploring concepts rather than buying into someone’s assertions, I believe you will excell in HTML and CSS, if you choose. :respect:
Which is correct because the <p> does not have a red style assigned.
If you revert to my original file (same as yours), your can assert the blue color with the !important modifier.
div.dos {color:#00f !important;}
Is this the post you were looking for?
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
IDs carry more weight and a million classes should never override an ID (except if the parser has an obscure bug when 256 classes are added to an element).
In your code above you are confusing specificity with inheritance. The div is targeted with the id and the p inherits the colour from the div. The p has no rules applied to it so a simple class on the p element will change the colour. Inheritance has no real ‘weight’ attached to it and will be the default unless other rules are applied (not all properties are inherited).
A class on the div itself will not over-ride an id unless it is also qualified by the id (#id.classname).
Here’s a very basic lesson on specificity (for more you can go to my website.)
IDs = 0100 value (we will say 100)
Classes = 0010 (10)
HTML elements 0001 (1)
So your #uno example is 100.
Your div.dos example is only 11. You’d need a whole lot more juice to get that working.
If he properly plans out his cascade then I don’t see why it does matter? ULtimately as long as it’s not coded in a way that’s not going to cause specificity issues or anything like that, are there any benefits to doing one way or another?
Also fun fact about specificity - !important carries 1000 weight so you actually can override it 
.
Off Topic:
If you’re referring to AngC, then she’s a she.
!important rules are treated in the same was as other rules and we should not confuse specificity with a ‘number’ as such.
As we said before, this is not a number but four comma-separated values, where the values in column a (inline styles) are the most important, and those in column d (element names and pseudo-elements) are the least important. When comparing selectors to determine which has the highest specificity, look from left to right, and compare the highest value in each column. So a value in column b will override values in columns c and d, no matter what they might be. As such, specificity of 0,1,0,0 would be greater than one of 0,0,10,10.
No number of ids will outweigh an !important just as no number of classes will/should outweigh an id, just as no number of external styles will outweigh an inline style unless !important is added into the mix.
Declarations are sorted in the following order (from lowest to highest priority):
user agent declarations
normal declarations in user style sheets
normal declarations in author style sheets
important declarations in author style sheets
important declarations in user style sheets
2 Likes
Yup, I can confirm that I’m a “she.”
Other than that I don’t know what you people are discussing anymore; you done went and lost me. But there must be a reason that classes and IDs exist. And there must/might be a way you can leverage them to work for you. I suspect that is a little out of my league for now. But I’ve put the idea into my ‘save’ file.
Ids are used for unique elements
eg. how many AngC members would you want there to be here?
Classes are “groups” that have have something(s) in common but are different
eg. New members all have not read enough posts, but they are not the same member.
Any help?
You really are overthinking them AngC. Don’t make this more complicated than it actually is 
.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.