How to layer specificity

Question

Within the posting at http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

in the context of defining the rules of 'specificity' is stated:

For example, if you want to change the background color of all the div elements that are posts on your blog, you can use the an attribute selector that targets every div whose class attribute starts with “post-”:

div[class*="post"] {
  background-color: #333;
  }

This will match all the div elements whose class attribute contains the words “posts”, in any position.

...

My question goes to extending the above example with:

** ...change the background color of all the div elements that are posts on your blog except posts by anon users looks like... **

[whatzitlooklike?]

thx

Answer 1

First, that's not the correct way to select elements with a particular class in CSS. That's what the . is for:

div.post {
  background-color: #333;
}

I've glanced through that article only briefly, but I have no idea why it would recommend the other syntax. Besides the fact that it requires more typing, it won't work in Internet Explorer 6, and it will confuse entirely any experienced CSS author.

As to your actual question, how you'd style posts by anonymous users depends entirely on how they're marked up. For example, if such a post looks like this in your HTML:

<div class="post anonymous">...</div>

Then you could simply add another style rule like so:

div.anonymous {
  background-color: purple;
}

The important question is: in what order do those style rules appear within your stylesheet? If .anonymous appears last, then it will take precedence wherever it applies. So, even though both the .post and .anonymous rules apply to that <div>, the .anonymous color takes precedence because it comes later. (Of course, the reverse will be true if you put those rules in the other order.)