Links and CSS

[Dan Drillich]

Good Day,

For some reason, the link is rendered as green. I expect it to be red.
What do I miss ;-) ?

Regards,
Dan

<style>
 
a:link {
  color: green;
}
 
.iMapHeader1, .iMapHeader1.link  {
    color: red;
}
 
</style>
 
<a href="/gm/folder-1.11.125560" class="iMapHeader1">Sector23</a>

[Eric Pascarello]

You try:

a:link.iMapHeader1 {
color: red;
}

Eric

[Dan Drillich]

Many thanks Eric!!!

But why is .iMapHeader1.link not good enough? You see, I'm upgrading a system and in the pre-upgraded system .iMapHeader1.link seems to work.

Regards,
Dan

[Bear Bibeault]

"link" is not a class name in your markup and matches nothing.

[Dan Drillich]

Thanks Bear!

[Dan Drillich]

I uploaded the above CSS segment to http://jigsaw.w3.org/css-validator. Interestingly, it didn't report .iMapHeader1.link to be a syntax error.

Regards,
Dan

[Bear Bibeault]

Originally posted by Dan Drillich:
Interestingly, it didn't report .iMapHeader1.link to be a syntax error.

It's not. It's perfectly valid CSS, but it doesn't match anything in your markup so you never see the rules applied.

[Dan Drillich]

Bear,

The validator approves .iMapHeader1.link.x.y.z as well.
You see, I don't understand how one can create a markup that will create a situation in which the .iMapHeader1.link.x.y.z selector will be satisfied.

Regards,
Dan

[Bear Bibeault]

Originally posted by Dan Drillich:
I don't understand how one can create a markup that will create a situation in which the .iMapHeader1.link.x.y.z selector will be satisfied.

<span class="iMapHeader1 link x y z">I'm satisfied.</span>

[Dan Drillich]

Thanks Bear!

[Bear Bibeault]

Cool.

For others following along:

The CSS selector notation ".this.that.other" means "match elements with class names this, that and other.

DOM elements can have more than one class. These can either be assigned at execution time in script, or assigned in markup by specifying the multiple class names separated by spaces:

<span class="this that other">whatever</span>

When manipulating classes in script, this can be a pain in the butt because to add or remove a class you've got to deal with the space-delimited string. For example, to remove the "that" class from the above, you need to get the class string back, remove the "that" from the middle, and put the modified string back. What a pain!

jQuery's addClass() and removeClass() methods make this painless as it handles all the space-delimited nonsense on your behalf behind the scenes.

P.S. I understand that HTML 5 will be making this a bit easier by allowing you to fetch the class names as an array rather than the space-delimited string, but until then I'm glad I have jQuery to do all that for me.
[ January 17, 2008: Message edited by: Bear Bibeault ]