Link order question

Discussion in 'HTML' started by tshad, May 4, 2005.

  1. tshad

    tshad Guest

    I am trying understand the order of link styles. This caused me a bit of
    problems when I changed my links just lately.

    I have 4 files to show what is happening.

    In the first file, http://www.payrollworkshop.com/samples/testLink1.htm, I
    have no classes and all the links use the Browser defaults.

    In the 2nd file, http://www.payrollworkshop.com/samples/testLink2.htm,I
    added a class that sets the color to red and have set one of the links to
    that class. It shows red no matter whether active, visited or link. This
    is exactly what I was looking for. I wanted to set some links to be one
    color, but not change color when it first visits a page, as normally happens
    with links.

    I that that was fine until I started adding in other styles using the "a:"
    styles. By adding the styles, as shown in
    http://www.payrollworkshop.com/samples/testLink3.htm, and doing nothing else
    all the links, including the ones with the class definition on it - they all
    changed to the new colors.

    This is confusing. If the class overrode the default link behavior, why
    wouldn't it also override the new link behavior. I would have thought that
    the new link behavior would act the same way and affect only those that
    didn't have a specific class assigned to it.

    Then, in http://www.payrollworkshop.com/samples/testLink4.htm, I took out
    all the specific links (a:link, a:visited and a:active). Then the old class
    (.toplink - which is not a link behavior) - worked over the "a" behavior.
    Why didn't the 1st link use the "a" definition instead of the .toplink
    behavior.

    Very confusing.

    Thanks,

    Tom
    tshad, May 4, 2005
    #1
    1. Advertising

  2. tshad

    Mitja Guest

    On Wed, 04 May 2005 09:31:33 +0200, tshad <> wrote:

    > Then, in http://www.payrollworkshop.com/samples/testLink4.htm, I took out
    > all the specific links (a:link, a:visited and a:active). Then the old
    > class (.toplink - which is not a link behavior) - worked over the "a"
    > behavior.
    > Why didn't the 1st link use the "a" definition instead of the .toplink
    > behavior.


    As you examples neatly show, the following rule precedence applies
    (weakest to strongest):
    a
    a.someStyle
    a:someState
    a.someStyle:someState
    a#someId (not sure about this one, but it doesn't matter in your case)
    a#someId:someState

    So you can solve your problem by leving a {...} as it is and substituting
    a.foo {}
    for
    a.foo:hover, a.foo:active, a.foo:visited, a.foo:link {}

    HTH
    Mitja
    Mitja, May 4, 2005
    #2
    1. Advertising

  3. tshad

    tshad Guest

    "Mitja" <> wrote in message news:eek:p.sp8ql0ecdob4us@ibis...
    > On Wed, 04 May 2005 09:31:33 +0200, tshad <> wrote:
    >
    > > Then, in http://www.payrollworkshop.com/samples/testLink4.htm, I took

    out
    > > all the specific links (a:link, a:visited and a:active). Then the old
    > > class (.toplink - which is not a link behavior) - worked over the "a"
    > > behavior.
    > > Why didn't the 1st link use the "a" definition instead of the .toplink
    > > behavior.

    >
    > As you examples neatly show, the following rule precedence applies
    > (weakest to strongest):
    > a
    > a.someStyle
    > a:someState
    > a.someStyle:someState
    > a#someId (not sure about this one, but it doesn't matter in your case)
    > a#someId:someState
    >
    > So you can solve your problem by leving a {...} as it is and substituting
    > a.foo {}
    > for
    > a.foo:hover, a.foo:active, a.foo:visited, a.foo:link {}
    >


    What do you mean by "someState"?

    The above makes sense except for one thing..

    Why does the .toplink style take precedence over the "a" in the 4th example?
    I would have thought the 1st link would have been yellow. The
    a:(active,link,visited) took precedence of the .toplink (which is not a link
    style). So why didn't the "a" also take precedence over the .toplink?

    Thanks,

    Tom
    > HTH
    > Mitja
    tshad, May 4, 2005
    #3
  4. tshad wrote:
    > I am trying understand the order of link styles. This caused me a
    > bit of problems when I changed my links just lately.


    "Las Vegas Has Animals"

    ...a mnemonic for the order you need to set the styles of your links.

    a { .. }
    a.link { .. }
    a.visited { .. }
    a.hover { .. }
    a.active { .. }

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, May 4, 2005
    #4
  5. Beauregard T. Shagnasty <> wrote:

    > a.link { .. }
    > a.visited { .. }
    > a.hover { .. }
    > a.active { .. }


    a:link { .. }
    a:visited { .. }
    a:hover { .. }
    a:active { .. }

    :)

    --
    David Håsäther
    David Håsäther, May 4, 2005
    #5
  6. David Håsäther wrote:
    > Beauregard T. Shagnasty <> wrote:
    >
    >>a.link { .. }
    >>a.visited { .. }
    >>a.hover { .. }
    >>a.active { .. }

    >
    > a:link { .. }
    > a:visited { .. }
    > a:hover { .. }
    > a:active { .. }
    >
    > :)


    I'll see your two dots and raise you one. <g> (heh, hasty typing
    instead of pasting, before second cup of coffee...)

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, May 4, 2005
    #6
  7. tshad

    Els Guest

    Beauregard T. Shagnasty wrote:

    > David Håsäther wrote:
    >> Beauregard T. Shagnasty <> wrote:
    >>
    >>>a.link { .. }
    >>>a.visited { .. }
    >>>a.hover { .. }
    >>>a.active { .. }

    >>
    >> a:link { .. }
    >> a:visited { .. }
    >> a:hover { .. }
    >> a:active { .. }
    >>
    >> :)

    >
    > I'll see your two dots and raise you one. <g> (heh, hasty typing
    > instead of pasting, before second cup of coffee...)


    What about a:focus?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, May 4, 2005
    #7
  8. Els wrote:

    > What about a:focus?


    Between visited and hover, if used.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, May 4, 2005
    #8
  9. tshad

    Mitja Guest

    On Wed, 04 May 2005 11:05:16 +0200, tshad <> wrote:

    > "Mitja" <> wrote in message news:eek:p.sp8ql0ecdob4us@ibis...
    >> On Wed, 04 May 2005 09:31:33 +0200, tshad <> wrote:
    >>
    >> > Then, in http://www.payrollworkshop.com/samples/testLink4.htm, I took

    >>
    >> As your examples neatly show, the following rule precedence applies
    >> (weakest to strongest):
    >> a
    >> a.someStyle
    >> a:someState
    >> a.someStyle:someState
    >> a#someId (not sure about this one, but it doesn't matter in your case)
    >> a#someId:someState
    >>
    >> So you can solve your problem by leving a {...} as it is and
    >> substituting
    >> a.foo {}
    >> for
    >> a.foo:hover, a.foo:active, a.foo:visited, a.foo:link {}
    >>

    >
    > What do you mean by "someState"?

    hover/active/...

    > The above makes sense except for one thing..
    > Why does the .toplink style take precedence over the "a" in the 4th
    > example?

    Because it's more specific. See also below.

    > I would have thought the 1st link would have been yellow. The
    > a:(active,link,visited) took precedence of the .toplink (which is not a
    > link style).

    Sure it is. ".toplink {}" means something like "justAboutAnything.toplink
    {}" and can also be written more expressively as "*.toplink {}". You can
    imagine it to be "a.toplink, b.toplink, p.toplink, td.toplink,
    table.toplink, pre.toplink, button.toplink, body.toplink [etc etc] {}".
    Mitja, May 4, 2005
    #9
  10. tshad

    tshad Guest

    "Mitja" <> wrote in message news:eek:p.sp9rkcledob4us@ibis...
    > On Wed, 04 May 2005 11:05:16 +0200, tshad <> wrote:
    >
    >> "Mitja" <> wrote in message news:eek:p.sp8ql0ecdob4us@ibis...
    >>> On Wed, 04 May 2005 09:31:33 +0200, tshad <> wrote:
    >>>
    >>> > Then, in http://www.payrollworkshop.com/samples/testLink4.htm, I took
    >>>
    >>> As your examples neatly show, the following rule precedence applies
    >>> (weakest to strongest):
    >>> a
    >>> a.someStyle
    >>> a:someState
    >>> a.someStyle:someState
    >>> a#someId (not sure about this one, but it doesn't matter in your case)
    >>> a#someId:someState
    >>>
    >>> So you can solve your problem by leving a {...} as it is and
    >>> substituting
    >>> a.foo {}
    >>> for
    >>> a.foo:hover, a.foo:active, a.foo:visited, a.foo:link {}
    >>>

    >>
    >> What do you mean by "someState"?

    > hover/active/...
    >
    >> The above makes sense except for one thing..
    >> Why does the .toplink style take precedence over the "a" in the 4th
    >> example?

    > Because it's more specific. See also below.
    >
    >> I would have thought the 1st link would have been yellow. The
    >> a:(active,link,visited) took precedence of the .toplink (which is not a
    >> link style).

    > Sure it is. ".toplink {}" means something like "justAboutAnything.toplink
    > {}" and can also be written more expressively as "*.toplink {}". You can
    > imagine it to be "a.toplink, b.toplink, p.toplink, td.toplink,
    > table.toplink, pre.toplink, button.toplink, body.toplink [etc etc] {}".


    I understand that. But my question has to do with the fact that .toplink is
    not a specific link style class.

    <style type="text/css">
    ..toplink{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: red;
    text-decoration: none;
    font-weight:bold;
    }
    a {
    color: #FFFF00;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    }
    a:visited.orangeClass {
    color:#FF6600;
    }
    a:link.orangeClass {
    color:#FF6600;
    }
    a:active.orangeClass {
    color:#FF6600;
    }
    </style>

    <a href="#" class="toplink">Link 1</a> to the next page</p>

    Toplink is not a link class, yet it overwrote "a" (and the browser default
    link classes).

    But in this case:

    <style type="text/css">
    ..toplink{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: red;
    text-decoration: none;
    font-weight:bold;
    }
    a {
    color: #FFFF00;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    }
    a:visited {
    color:#green;
    }
    a:link {
    color:green;
    }
    a:active {
    color:green;
    }
    </style>

    <a href="#" class="toplink">Link 1</a> to the next page</p>

    Toplink doesn't overwrite a:(visited,link,active). Why does it have more
    precedence over "a" and not the others (which are not classes either). I
    would think Toplink is more specific for them, if it was for "a"?

    If this is the case, I would assume the precedence should be (unless I am
    missing something, which I am sure I am):

    browser default
    a
    someStyle
    a.someStyle
    a:someState
    a.someStyle:someState
    a#someId (not sure about this one, but it doesn't matter in your case)
    a#someId:someState

    or

    browser default
    a
    a.someStyle
    someStyle
    a:someState
    a.someStyle:someState
    a#someId (not sure about this one, but it doesn't matter in your case)
    a#someId:someState

    Not sure which.

    Thanks,

    Tom
    tshad, May 5, 2005
    #10
    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. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    798
    Kevin Spencer
    May 17, 2005
  2. Ben Amada
    Replies:
    7
    Views:
    2,389
    Ben Amada
    Jan 16, 2004
  3. Soren Kuula
    Replies:
    2
    Views:
    488
    Soren Kuula
    Feb 1, 2004
  4. cspoh
    Replies:
    0
    Views:
    235
    cspoh
    Jul 31, 2003
  5. Stephan Kämper
    Replies:
    2
    Views:
    229
    Stephan Kämper
    Jan 18, 2004
Loading...

Share This Page