Question about selectors...

Discussion in 'HTML' started by rbaulbin@hotmail.com, Feb 7, 2008.

  1. Guest

    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.
     
    , Feb 7, 2008
    #1
    1. Advertising

  2. Nik Coughlin Guest

    <> wrote in message
    news:...
    > 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.
     
    Nik Coughlin, Feb 7, 2008
    #2
    1. Advertising

  3. ..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
     
    Michael Fesser, Feb 7, 2008
    #3
  4. 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".)
     
    Harlan Messinger, Feb 8, 2008
    #4
  5. 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/
     
    Jukka K. Korpela, Feb 8, 2008
    #5
  6. Ben C Guest

    On 2008-02-07, Nik Coughlin <> wrote:
    ><> wrote in message
    > news:...
    >> 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.
     
    Ben C, Feb 8, 2008
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad

    IE on attribute selectors

    tshad, Nov 12, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    353
    tshad
    Nov 12, 2004
  2. Matt Beckwith

    Class and ID Selectors (CSS question)

    Matt Beckwith, Jul 12, 2003, in forum: HTML
    Replies:
    3
    Views:
    394
    David Dorward
    Jul 13, 2003
  3. Derek Clarkson
    Replies:
    3
    Views:
    396
    Derek Clarkson
    Nov 7, 2003
  4. kayodeok
    Replies:
    0
    Views:
    367
    kayodeok
    Dec 12, 2003
  5. Jeanne D

    Question about CSS selectors

    Jeanne D, Oct 15, 2005, in forum: HTML
    Replies:
    8
    Views:
    394
    Jeanne D
    Oct 16, 2005
Loading...

Share This Page