An (Expectedly) Easy Pseudo-class question

Understanding a pseudo-class

[Raphael]

I am just beginning to learn XHTML / CSS and am having difficulty with just a bit of code. First I'll create a class:

.whatever {
font: Verdana;
}

...and then I'll use a pseudo class:

a.whatever:hover {
text-decoration:overline;
}

...and, silly me, I expect the "a.whatever:hover" declaration to...well...DO something. Instead, it'll do nothing at all. So, out of frustration, I'll instead use:

.whatever a:hover {
text-decoration:overline;
}

...and I'll find that it works exactly as I intended the previous declaration ("a.whatever:hover") to work. So, my question is, why the smeg doesn't my previous declaration work? I seem to be doing everything right, so I must have a very fundamental misunderstanding of just what an "a.whatever:[link/visited/active/hover]" type of declaration is supposed to be used for.

Anyone?

ps: This may matter: the "class=whatever" is used within a <div> tag

[SuzyUK]

Hi Raphael - Welcome to Webmasterworld [webmasterworld.com]

ps: This may matter: the "class=whatever" is used within a <div> tag

that is exactly it ;)

<div class="foo"><a href="foo.htm">some link</a></div>

is referenced in the CSS:
.foo a:hover {some styles}

<div><a href="foo.htm" class="foo">some link</a></div>

is referenced in the CSS:
a.foo:hover {some styles}

in the first example you are referencing the link through the div class name, in the second you have applied the class name directly to the link.

Suzy

[Raphael]

Thanks. I guess I can accept the rule, but I don't understand the reasoning behind it.

And thanks again for answering; I half-wondered if anyone would. I find it very reasonable that people come here to ask questions, but it seems a bit odd that anyone is hanging around to answer them. :-)

[drbrain]

The psuedo-class is part of the selector, so it applies to the element you attach it to. It works just like a regular class, so this:

<div class="red bold">text</div>

and this:

<div class="red"><span class="bold">more text</span></div>

require different selectors to match, ".red.bold" and ".red .bold" (note the space) respectively.

[dragonlady7]

> I find it very reasonable that people come here to ask questions, but it seems a bit odd that anyone is hanging around to answer them. :-) >

I feel the same way but boy is it great that they do. :D