SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Selector precedence?

    It seems that a descendant selector takes precedence ver an ID selector. Any other way I can handle this without using class selectors?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>selectors</title>
    
    <style type="text/css">
        div#test {
            color: blue;
            }
        div#test span {
            color: red;
            }
        span#tester {
            color: green;
            }
    </style>
    
    </head>
    
    <body>
    
        <div id="test">
            <span>here</span> is <span id="tester">some</span> text
        </div>
    
    </body>
    
    </html>
    How can I get my "tester" span green w/o ditching the div#test span descendant selector? Or can I?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Here ya go beetle! This worked for me:
    Code:
    <style type="text/css">
        div#test {
            color: blue;
            }
        div#test span {
            color: red;
            }
        div#test span#tester {
            color: green;
            }
    </style>

  3. #3
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could change it to
    div#test span#tester
    {
    color: green;
    }

    ...and "some" will be green

    I guess it's because div#test span is a more "low level" definition for <span>s inside div#test than the more "general" selector span#tester

    Maybe there's some useful info here:
    http://www.w3.org/TR/REC-CSS2/select...l#id-selectors

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrmph... DevilHomer one minute quicker than me

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by jofa
    Hrmph... DevilHomer one minute quicker than me
    Yes I am very sneaky...

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, the ole double-whammy: id AND descendant selector. Thx fellas, it works.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •