SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    East of Ottawa, ON
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    child and adjacent sibling

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    div > p > a:first-child { color: red; }
    div > p > a:last-child { color: #ccc; }
    div > p > a+a { color: yellow; }
    </style>
    </head>
    <body>
    <div>
      <p>some text <a href="#">link</a> and <a href="#">link2</a> and <a href="#">link 3</a></p>
    </div>
    </body>
    </html>
    Should the 3rd link be yellow or gray?

    Firefox shows it gray and opera as yellow.

    Who's right?

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like a bug in Opera 9.2 and older which Opera 9.5 alpha should have resolved.

    I believe that first-child and last-child have more specificity than the + selector and therefore the last link should display as gray irrelevant of the order.

  3. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Opera 9.2 doesn't support :last-child, so the second ruleset isn't applied at all.

    It should be gray; as csswiz says it has higher specificity (although the + combinator doesn't affect specificity).
    Code:
             Selector           Specificity
    div > p > a:first-child     0,0,1,3
    div > p > a:last-child      0,0,1,3
    div > p > a+a               0,0,0,4
    Simon Pieters


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
  •