Question about selectors...

R

rbaulbin

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.
 
N

Nik Coughlin

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.
 
M

Michael Fesser

..oO([email protected])
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
 
H

Harlan Messinger

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".)
 
J

Jukka K. Korpela

Scripsit (e-mail address removed):
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;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top