SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Remind me : a,visited,etc.

    I have a style called

    .legals

    and I have

    .legals:active

    and

    .legals:visited

    Remind me; these 3 are all "1" class name right? They just define different styles if the text IS a link and has not been visited (active) or has been (visited) right?

    So

    <span class="legals">Hello, how are you <a href="doing.asp">doing</a>?

    Should yeild

    Hello, how are you doing? (if it hasn't been clicked), where the blue highlite is actually the style defined in the :active CSS, right? And when it's been clicked it will then inherit the :visited CSS style, right?

    Am I understanding this correctly? If so, quick second question. What is # used for in CSS?

  2. #2
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These are called pseudo classes. This is how understand them;

    :link -> default style
    :visited -> style of visited links, like you said
    :active -> style of an active link, you can see this just after you've clicked on the link and before the next page starts loading
    :hover -> style for when you 'hover' the mouse cursor over the link
    :focus -> style for when the link has focus, this you can see when you navigate with the tab key

    As for your second question, # has 2 uses.

    -> in a color code it indicates that the it is in hexadecimal format -> color: #ffff00

    -> in a selector it refers to an id :
    CSS: #mybox {/*declarations here*/}
    html: <div id="mybox"><!-- content here --></div>

    It works the same like a class, except that you should only have 1 element using a particular id on a page.

    Hope this helped

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  3. #3
    Non-Member Icheb's Avatar
    Join Date
    Mar 2003
    Location
    Germany
    Posts
    1,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are more pseudo formats:

    :first-letter
    :first-line

    Should be self-explaining.

  4. #4
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    By the way, you can't override a psuedo class like this:

    a {
    color: red;
    }
    a:visited {
    color: green
    }
    a.class {
    color: yellow
    }

    Visited links of type "class" will still be green.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a distinction to be made here.

    The ones I mentioned higher are psuedo classes and will influence the style of the whole element under certain circumstances (hover, visited... ).

    :first-letter and :first-line are pseudo elements and refer to the structural makeup of the document. Other pseudo elements are:

    :first-child
    :after
    :before

    That's my understanding of it anyhow . As usual, cross-browser support on these can be iffy at best

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Hello, how are you doing? (if it hasn't been clicked), where the blue highlite is actually the style defined in the :active CSS, right?


    No Wrong!! Just in case you missed it in Zoef's fine explanation the "active" state is when the mouse pointer is positioned over an element and then clicked. This is the active state. (It is also possible to make it active by tabbing via the keyboard and then pressing the return key.)

    I just thought i'd mention it again in case you missed it above.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •