What's wrong with my understanding of CSS here?..

Factual Questions
1

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]

This css- http://i.imgur.com/ogs3O.jpg
renders like this - http://i.imgur.com/6ki1E.jpg

The adding of ‘class2’ to the second anchor is being ignored. I don’t understand why. Can someone tell me where I’ve gone wrong in my understanding?

2

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.

3

(Boy the sdmb is being slow today)

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)

4

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.

5

So how would I go about applying different css rules to selected tags when tags of the same type within the same parent tag have been given a rule?

I want to be able to add a class to one of many anchors within a div so that its style changes.

6

did it by defining a class like this…

.class1 p a.selected{
//different style here
}

underneath the first class1 definition. Then add ‘selected’ as a class. Not sure if this is the correct way to do it but it works.

7

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:

http://phrogz.net/css/HowToDevelopWithCSS.html