CSS hacks (tricks)

Question

Sometimes when I see a website I like or sites from respected people, I see the source codes and try to understand them (as we all do).

On Jeremy Keiths site he uses the following code:

[role="navigation"] a {
font-weight: bold;
text-decoration: none; }

I have never seen this before, and a few other times I saw code (which can be considered a "trick") that I had never seen before.

Other than asking what the above code means, my question is - is there any documentation, book or blogs that go through to learn about the advanced/less known CSS "tricks"?

Answer 1

The above targets elements that have a role attribute, such as:

<div role="navigation">
  <a href="...">...</a>
</div>

A class would make sense here too, but it's just another way of doing it. Attribute selectors are a standard part of CSS2, but at the time IE6 didn't support them so it hasn't been used much until recently.

There are many other such selectors that have been around for a long time but couldn't be used due to limitations imposed by IE. See Quirksmode for more examples.