SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: syntax question

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    syntax question

    hey all,

    I have two spans within a link, e.g.

    <div id="mylinks">
    <a href=""><span class="span0">first line</span><span class="span1">second line</span></a>
    </div>

    I want to define different styles for these spans depending on the link state, e.g.

    [here's my pseudo CSS]


    /* normal styles */

    #mylinks a.span0 {
    STYLE
    }

    #mylinks a.span1 {
    STYLE
    }


    /* hover styles */

    #mylinks a:hover.span0 {
    STYLE
    }

    #mylinks a:hover.span1 {
    STYLE
    }


    From the the name "cascading, I assume this is possible. But I am totally lost in the syntax ... clarification appreciated.

    Many thanks!

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use a list instead of those DIVs and SPANs.

    Code:
    <ul id="mylinks">
        <li><a href="#">first line</a></li>
        <li><a href="#">second line</a></li>
    </ul>
    And then for the CSS, just style normally, but make sure you add list-style: none; to the #mylinks selector.

    And by the way, welcome to SitePoint!

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Dan about the use of a list, but to answer your question, you're almost there. You only need to insert a descendant combinator (a space) between a and the class selector:
    Code CSS:
    #mylinks a .span0 {
    STYLE
    }
     
    #mylinks a .span1 {
    STYLE
    }
     
     
    /* hover styles */
     
    #mylinks a:hover .span0 {
    STYLE
    }
     
    #mylinks a:hover .span1 {
    STYLE
    }
    The way you wrote those rules, they would match a link with class span0 etc within an element with ID mylinks.

    Since you've attached the class names to spans inside the links, you need to indicate another nesting level.
    #mylinks a .span0 selects an element with class span0 that is a descendant of an a element that is a descendant of an element with ID mylinks, which will match your spans.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks!

    Cool, thank you both. Simple examples like this really help me get the feel of things ... good to be here

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I didn't look at your post count or join date before replying. A belated Welcome to SitePoint Forums! is in order!
    Birnam wood is come to Dunsinane


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
  •