My understanding of the ‘cascading’ part of CSS is that any class defined after and/or more specific to an individual selector overrides anything less specific or earlier defined. But…
[COLOR=“SlateGray”]
(I don’t know why I screenshotted this when I could have just pasted the code… but the screenshot is done now so…)[/COLOR]
I think it’s because the “.class1 p a” selector is more specific than the “.class2”. More specific overrides less specific, regardless of order. So try “.class2 p a” and see if that works.
ETA: or something - looking closer I don’t think my suggestion would work - maybe “.class1 .class2”. What the hell, an expert should be along shortly.
You’ve helped by reminding my about what ‘specific’ means in the context of css. I guess I was assuming that because class2 was applied directly to the second anchor that it should take priority, but maybe in css class1 will take priority over class2 because it is more specific.
Basically what I’m trying to get is a ‘standard’ style for all links within a given div, and a second style that I can apply to certain links (using jquery’s addcss() function)
In general, more selectors means more specificity.
Your class1 rule requires several things to be true in a particular order for particular types of elements. That’s high specificity.
Your class2 rule requires only one thing to be true, and it could apply to any type of element. That’s low specificity.
Order is usually only a factor when rules have the same specificity. For that reason I prefer not to rely on order, and think about specificity instead.
The correct way probably depends on how you’re generating your HTML. If it’s dynamic, then yes, adding a special class to elements that need to be treated differently is probably a good start.
Note that you don’t necessarily have to be quite so specific, and you might simplify your css by being a bit more general. I find that using meaningful semantic class names usually helps me to see how to structure selectors. This has some good advice, including some examples similar to what you’re trying to do: