«

Hello -

Question for anyone. With the following CSS:

..menu a:active
{
background-color: #F6D566;
color: #CC00CC;
}


Why won't this HTML work:

<a class="menu" href="#wherever"> This is a paragraph.</a>

But this does:

<div class="menu">
<a class="menu" href="#wherever"> This is a paragraph.</a>
</div>

Why does it need the div? If you write the CSS as a.menu:active
or .menu:active, it works.

<> wrote in message
news:c0fa1cbd-3dd1-40a9-8ef7-...
> Hello -
>
> Question for anyone. With the following CSS:
>
> .menu a:active
> {
> background-color: #F6D566;
> color: #CC00CC;
> }
>
>
> Why won't this HTML work:
>
> <a class="menu" href="#wherever"> This is a paragraph.</a>

Because the CSS means apply this style to an a:active which is a child of
menu.

> But this does:
>
> <div class="menu">
> <a class="menu" href="#wherever"> This is a paragraph.</a>
> </div>
>
> Why does it need the div? If you write the CSS as a.menu:active
> or .menu:active, it works.

..oO()

>Question for anyone. With the following CSS:
>
>.menu a:active
>{
> background-color: #F6D566;
> color: #CC00CC;
>}
>
>
>Why won't this HTML work:
>
><a class="menu" href="#wherever"> This is a paragraph.</a>
>
>But this does:
>
><div class="menu">
><a class="menu" href="#wherever"> This is a paragraph.</a>
></div>
>
>Why does it need the div?

Because you defined it like that in your selector.

>If you write the CSS as a.menu:active
>or .menu:active, it works.

From <http://gallery.theopalgroup.com/selectoracle/>:

..menu a:active

| Selects any a element which is in a state of activation that is a
| descendant of any element with a class attribute that contains the
| word menu.

a.menu:active

| Selects any a element with a class attribute that contains the word
| menu and which is in a state of activation.

Micha

wrote:
> Hello -
>
> Question for anyone. With the following CSS:
>
> .menu a:active
> {
> background-color: #F6D566;
> color: #CC00CC;
> }
>
>
> Why won't this HTML work:
>
> <a class="menu" href="#wherever"> This is a paragraph.</a>
>
> But this does:
>
> <div class="menu">
> <a class="menu" href="#wherever"> This is a paragraph.</a>
> </div>
>
> Why does it need the div? If you write the CSS as a.menu:active
> or .menu:active, it works.

Right. Because "a.menu:active" (an activated anchor of class "menu")
means "match activated anchors of class 'menu'" and ".menu a:active"
doesn't mean that. (It means match activated anchors that are inside
something [there's no reason why it has to be a div] of class "menu".)

Scripsit :

> Hello -
>
> Question for anyone.

Please get to the point.

> .menu a:active
> {
> background-color: #F6D566;
> color: #CC00CC;
> }

The selector :active is interpreted differently by different browsers.
This is the interesting issue and perhaps worth discussing. The rest is
more or less very elementary CSS, which you should learn from a good
tutorial. Tutorials are generally better at explaining elementary things
than casual Usenet messages are.

> Why won't this HTML work:
>
> <a class="menu" href="#wherever"> This is a paragraph.</a>

It does, for some values of "work". But you style sheet snippet has no
effect on its rendering, of course, since .menu a:active matches only an
<a> element in active state (whatever _that_ is) nested inside an
element in class "menu".

But if it makes a meaningful link, it's not a paragraph.

> But this does:
>
> <div class="menu">
> <a class="menu" href="#wherever"> This is a paragraph.</a>
> </div>
>
> Why does it need the div?

It doesn't "need" a div. It's a simple matter of the meaning of
selectors.

> If you write the CSS as a.menu:active
> or .menu:active, it works.

"Doctor, if I do _this_, I feel better."
"Then do so."

If you want the effect to take place both for links that are in class
"menu" and for links inside an element in class "menu", you can simply
write

a.menu:active, .menu a:active
{
background-color: #F6D566;
color: #CC00CC;
}


--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 2008-02-07, Nik Coughlin <> wrote:
><> wrote in message
> news:c0fa1cbd-3dd1-40a9-8ef7-...
>> Hello -
>>
>> Question for anyone. With the following CSS:
>>
>> .menu a:active
>> {
>> background-color: #F6D566;
>> color: #CC00CC;
>> }
>>
>>
>> Why won't this HTML work:
>>
>> <a class="menu" href="#wherever"> This is a paragraph.</a>
>
> Because the CSS means apply this style to an a:active which is a child of
> menu.

Descendent, not child.