CSS - Syntax for defining Links with Classes

Discussion in 'HTML' started by Ben Amada, Jan 16, 2004.

  1. Ben Amada

    Ben Amada Guest

    In the CSS, when defining links with classes, I've seen it done 2 ways.
    Which way is better, correct, and/or the standard?

    ====== Method 1 ======
    A.myclass:visited {color: white}
    A.myclass:link {color: white;}
    A.myclass:active {color: white;}
    A.myclass:hover {color: white;}

    ====== Method 2 ======
    ..myclass a:visited {color: white}
    ..myclass a:link {color: white;}
    ..myclass a:active {color: white;}
    ..myclass a:hover {color: white;}

    Thanks in advance,
    Ben
     
    Ben Amada, Jan 16, 2004
    #1
    1. Advertisements

  2. Ben Amada

    Mark Parnell Guest

    On Thu, 15 Jan 2004 20:08:41 -0700, "Ben Amada"
    <> declared in alt.html:
    > Which way is better, correct, and/or the standard?
    >
    > ====== Method 1 ======
    > A.myclass:visited {color: white}
    > A.myclass:link {color: white;}
    > A.myclass:active {color: white;}
    > A.myclass:hover {color: white;}
    >
    > ====== Method 2 ======
    > .myclass a:visited {color: white}
    > .myclass a:link {color: white;}
    > .myclass a:active {color: white;}
    > .myclass a:hover {color: white;}
    >


    Depends on your HTML.

    Method 1 will work when you have <a href="foo" class="myclass">foo</a>.

    Method 2 will work when you have <element class="myclass"><a
    href="foo">foo</a></element>

    BTW: You should specify a background colour when you specify a text
    colour. :)

    HTH

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Jan 16, 2004
    #2
    1. Advertisements

  3. Ben Amada

    Ben Amada Guest

    Mark Parnell wrote:

    > On Thu, 15 Jan 2004 20:08:41 -0700, "Ben Amada"
    > <> declared in alt.html:
    >> Which way is better, correct, and/or the standard?
    >>
    >> ====== Method 1 ======
    >> A.myclass:visited {color: white}
    >> A.myclass:link {color: white;}
    >> A.myclass:active {color: white;}
    >> A.myclass:hover {color: white;}
    >>
    >> ====== Method 2 ======
    >> .myclass a:visited {color: white}
    >> .myclass a:link {color: white;}
    >> .myclass a:active {color: white;}
    >> .myclass a:hover {color: white;}
    >>

    >
    > Depends on your HTML.
    >
    > Method 1 will work when you have <a href="foo" class="myclass">foo</a>.
    >
    > Method 2 will work when you have <element class="myclass"><a
    > href="foo">foo</a></element>


    I see. Method 1 is better for me then -- I'm not using the element tag.

    > BTW: You should specify a background colour when you specify a text
    > colour. :)


    My link will be in a table which has a background image (which has
    horizontal lines in it). In this case, what background color would I
    specify? Is there a transparent color?

    > HTH

    .... yes, very much so far :)

    Ben
     
    Ben Amada, Jan 16, 2004
    #3
  4. Ben Amada

    Mark Parnell Guest

    On Thu, 15 Jan 2004 21:27:13 -0700, "Ben Amada"
    <> declared in alt.html:
    > Mark Parnell wrote:
    >> On Thu, 15 Jan 2004 20:08:41 -0700, "Ben Amada"
    >> <> declared in alt.html:
    >>> Which way is better, correct, and/or the standard?
    >>>
    >>> ====== Method 1 ======
    >>> A.myclass:visited {color: white}
    >>> A.myclass:link {color: white;}
    >>> A.myclass:active {color: white;}
    >>> A.myclass:hover {color: white;}
    >>>
    >>> ====== Method 2 ======
    >>> .myclass a:visited {color: white}
    >>> .myclass a:link {color: white;}
    >>> .myclass a:active {color: white;}
    >>> .myclass a:hover {color: white;}
    >>>

    >>
    >> Depends on your HTML.
    >>
    >> Method 1 will work when you have <a href="foo" class="myclass">foo</a>.
    >>
    >> Method 2 will work when you have <element class="myclass"><a
    >> href="foo">foo</a></element>

    >
    > I see. Method 1 is better for me then -- I'm not using the element tag.


    There is no element tag. I used it to show that Method 1 works if the
    class is on the element containing the anchors (whether it be a <div>, a
    list, whatever). Method 2 works if the class is on the anchors
    themselves.

    >
    >> BTW: You should specify a background colour when you specify a text
    >> colour. :)

    >
    > My link will be in a table


    It *is* tabular data, I assume?

    > which has a background image (which has
    > horizontal lines in it). In this case, what background color would I
    > specify? Is there a transparent color?


    Strangely enough, { background: transparent; } :)

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Jan 16, 2004
    #4
  5. Ben Amada

    Chet Guest

    "Ben Amada" <> wrote in message
    news:GMJNb.27562$zs4.7426@fed1read01...
    | Mark Parnell wrote:
    |
    | > On Thu, 15 Jan 2004 20:08:41 -0700, "Ben Amada"
    | > <> declared in alt.html:
    | >> Which way is better, correct, and/or the standard?
    | >>
    | >> ====== Method 1 ======
    | >> A.myclass:visited {color: white}
    | >> A.myclass:link {color: white;}
    | >> A.myclass:active {color: white;}
    | >> A.myclass:hover {color: white;}
    | >>
    | >> ====== Method 2 ======
    | >> .myclass a:visited {color: white}
    | >> .myclass a:link {color: white;}
    | >> .myclass a:active {color: white;}
    | >> .myclass a:hover {color: white;}
    | >>
    | >
    | > Depends on your HTML.
    | >
    | > Method 1 will work when you have <a href="foo"
    class="myclass">foo</a>.
    | >
    | > Method 2 will work when you have <element class="myclass"><a
    | > href="foo">foo</a></element>
    |
    | I see. Method 1 is better for me then -- I'm not using the
    element tag.
    |
    | > BTW: You should specify a background colour when you specify
    a text
    | > colour. :)
    |
    | My link will be in a table which has a background image (which
    has
    | horizontal lines in it). In this case, what background color
    would I
    | specify? Is there a transparent color?
    |
    | > HTH
    | ... yes, very much so far :)
    |
    | Ben

    A.myclass:visited {color: white;background-color:transparent;}

    The background-color: transparent; will allow the table
    background to show through.

    hth
    --
    Chet
    (remove NO.....SPAM)
     
    Chet, Jan 16, 2004
    #5
  6. Ben Amada

    Ben Amada Guest

    Thanks Chet.

    Ben
     
    Ben Amada, Jan 16, 2004
    #6
  7. Ben Amada

    Ben Amada Guest

    Mark Parnell wrote:

    > On Thu, 15 Jan 2004 21:27:13 -0700, "Ben Amada"
    > <> declared in alt.html:
    >> Mark Parnell wrote:
    >>> On Thu, 15 Jan 2004 20:08:41 -0700, "Ben Amada"
    >>> <> declared in alt.html:
    >>>> Which way is better, correct, and/or the standard?
    >>>>
    >>>> ====== Method 1 ======
    >>>> A.myclass:visited {color: white}
    >>>> A.myclass:link {color: white;}
    >>>> A.myclass:active {color: white;}
    >>>> A.myclass:hover {color: white;}
    >>>>
    >>>> ====== Method 2 ======
    >>>> .myclass a:visited {color: white}
    >>>> .myclass a:link {color: white;}
    >>>> .myclass a:active {color: white;}
    >>>> .myclass a:hover {color: white;}
    >>>>
    >>>
    >>> Depends on your HTML.
    >>>
    >>> Method 1 will work when you have <a href="foo" class="myclass">foo</a>.
    >>>
    >>> Method 2 will work when you have <element class="myclass"><a
    >>> href="foo">foo</a></element>

    >>
    >> I see. Method 1 is better for me then -- I'm not using the element tag.

    >
    > There is no element tag. I used it to show that Method 1 works if the
    > class is on the element containing the anchors (whether it be a <div>, a
    > list, whatever). Method 2 works if the class is on the anchors
    > themselves.


    OK - I now see what you were explaining. In this case, I'll be defining the
    class directly on the anchor itself -- so I believe Method 1 is better in
    that case (above you say Method 2, but I think you meant Method 1 looking at
    your original example).

    >>> BTW: You should specify a background colour when you specify a text
    >>> colour. :)

    >>
    >> My link will be in a table

    >
    > It *is* tabular data, I assume?


    I'm not sure what you mean by "tabular data". It isn't a chart for
    instance - the table basically displays some background graphics and images
    which make up the navigation menu for the web site.

    >> which has a background image (which has
    >> horizontal lines in it). In this case, what background color would I
    >> specify? Is there a transparent color?

    >
    > Strangely enough, { background: transparent; } :)


    A-ha! That was too obvious :)

    Thanks,
    Ben
     
    Ben Amada, Jan 16, 2004
    #7
  8. Ben Amada

    Mark Parnell Guest

    On Thu, 15 Jan 2004 23:17:54 -0700, "Ben Amada"
    <> declared in alt.html:
    >
    > OK - I now see what you were explaining. In this case, I'll be defining the
    > class directly on the anchor itself -- so I believe Method 1 is better in
    > that case (above you say Method 2, but I think you meant Method 1 looking at
    > your original example).
    >


    Yes. I'm not doing very well at things like that today. I think I need
    to go home. :-/

    > I'm not sure what you mean by "tabular data". It isn't a chart for
    > instance - the table basically displays some background graphics and images
    > which make up the navigation menu for the web site.
    >


    That doesn't sound like tabular data. Why does it need to be in a table?
    http://www.allmyfaqs.com/faq.pl?Tableless_layouts

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
     
    Mark Parnell, Jan 16, 2004
    #8
  9. Ben Amada

    Ben Amada Guest

    Mark Parnell wrote:

    >> I'm not sure what you mean by "tabular data". It isn't a chart for
    >> instance - the table basically displays some background graphics and
    >> images which make up the navigation menu for the web site.
    >>

    >
    > That doesn't sound like tabular data. Why does it need to be in a table?
    > http://www.allmyfaqs.com/faq.pl?Tableless_layouts


    I took a quick look at the link you provided. You're probably right that a
    table could be avoided, but it's a somewhat complicated table and I'm not
    sure if I can easily convert it to a tableless layout. Nevertheless, I'll
    look at some of the sample code to familiarize myself with some of the
    concepts and see how I feel about attempting to convert it.

    Thanks,
    Ben
     
    Ben Amada, Jan 16, 2004
    #9
    1. Advertisements

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

    Defining classes in jscript

    Henke, Nov 28, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    478
    Hans Kesting
    Nov 28, 2003
  2. Senthilraja
    Replies:
    7
    Views:
    765
    stelios xanthakis
    Oct 15, 2003
  3. johny smith
    Replies:
    8
    Views:
    683
    Peter Koch Larsen
    Jul 2, 2004
  4. Raj Kotaru

    Colon (:) syntax in defining fields in a struct

    Raj Kotaru, Aug 28, 2004, in forum: C Programming
    Replies:
    16
    Views:
    7,341
    Keith Thompson
    Sep 3, 2004
  5. FaYYaZ

    Syntax error when defining class

    FaYYaZ, Dec 3, 2004, in forum: ASP General
    Replies:
    1
    Views:
    188
    Bob Barrows [MVP]
    Dec 3, 2004
  6. Replies:
    7
    Views:
    223
    Pit Capitain
    Nov 25, 2005
  7. Mark Smith

    CSS classes within classes

    Mark Smith, Dec 22, 2008, in forum: Javascript
    Replies:
    3
    Views:
    232
    Mark Smith
    Dec 22, 2008
  8. vasudevram
    Replies:
    6
    Views:
    1,096
    vasudevram
    Apr 24, 2013
Loading...