SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)

    multiple adjacent selectors.

    In trying to answer a forum question, I started thinking about a method that has me stumped. I suppose my weakness is which browser has which quirk, but I digress.

    Aside from older versions of IE, no surprise, it seem all browsers support adjacent selectors ( or at least that's what all the compatibility charts I found on google seem to indicate).

    The person I was trying to help wanted a to create a table with four columns, win which hovering on the first column ( not on the row) would have an effect on the fourth column. It being a table.. I thought the solution would be simple... sibling selectors:

    td:hover + td +td + td { attibute:value}

    this technique seems to work is some browsers but not in others.. like Safari 5 for mac. I would have thought taht it was something with the pseudo class :hover, but oddly enough the following works in all non IE browsers?!


    td:hover + td{ attibute:value}


    any thoughts?

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, the only ones having troubles with the exemple below are ie6, ch6, saf5.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr"><head>
    
      <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
      <meta	http-equiv="Content-Language"	content="en">
    
      <style type="text/css">
      
        td+td+td+td {text-indent: -999em;}
        td:hover+td {color: #def; text-indent:0;}
        td:hover+td+td {color: #edf; text-indent:0;}
        td:hover+td+td+td {color: #fed; text-indent:0;}
        
        a+a+a+a {color: white;}
        a:hover+a {color: #def;}
        a:hover+a+a {color: #edf;}
        a:hover+a+a+a {color: #fed;}
        
    
      </style>
    
      
    
    </head><body>
    
      <table>
          <tr>
              <td>Hover me!</td>
              <td>Spectator</td>
              <td>Also a spectator</td>
              <td>Target</td>
          </tr>
      </table>
      
      <a href="#">Hover me!</a>
      <a href="#">Spectator</a>
      <a href="#">Also a spectator</a>
      <a href="#">Target</a>
    
    </body></html>
    ie6... well, you know ie6, no sibling selector at all for it.

    ch6, saf5 (meaning webkit) seem to support going down only one sibling on hover. sometimes, if you play hovering, they seem to recognize the selector for two siblings, but not in a consistent manner. equals buggy implementation.

    ie7-8, ff3.6, opera10.60 behave wonderful.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    does that mean Saf 4 works? I just don't remembered the number of siblings ever being a factor before, it either worked or it didn't ( ie IE) Besides, it a moot point in IE 6 and under as it doesn't do :hover on anything but anchors.

    I was just asking because IE usually the culprit for everything. In fact I usually just conditional link a js to emulate modern CSS in IE by default. It's odd to discover a bug like this ... and especially when Safari IS NOT listed as buggy in CSS compatibility charts

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does that mean Saf 4 works?
    i very much doubt that if it's not working in saf5 it will in saf4.


    Safari IS NOT listed as buggy
    but it is. even here on SP. and they still haven't fixed it, neither on saf nor ch.


    and there are some inconsistencies on the SP reference:

    the compatibility chart says ie6 none, but below we read
    In Internet Explorer 6 and 7, this selector will also select some inappropriate SGML elements such as the doctype declaration and comments.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I don't trust them for real world deployment, do yourself a favor and slap classes on them. It sucks, but at least it works... everywhere.

    Though the multi-hover isn't gonna work that way -- but I'd try to trap the TR instead of the TD in that case.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    Shadow:

    I am not sure classes would make a difference in this case a was trying to simulate a behaviour where hovering on the firsrt element would cause a change on the fourth. I suppose it's worth trying out the difference between
    td:hover + td + td +td{} and .mouse:hover + .skip + .skip + .act{}.

    It would be an extremely selective and weird bug if it works like that

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    What I meant to imply is I'd just make the whole row have the hover state, which would make a HELL of a lot more sense in most cases.

    Though I'd have to see the data to say for sure. Hovering opposite ends of the same TR seems... a bit wierd if it's tabular data - and if it's not tabular data...

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I suppose it's worth trying out the difference between
    td:hover + td + td +td{} and .mouse:hover + .skip + .skip + .act{}.
    no difference. the same culprits: ie6, ch6, saf5. even though ch6, saf5 apply the text indent, when it comes to hover they can work with only one adjacent selector.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr"><head>
    
      <meta	http-equiv="Content-Type"	content="text/html; charset=utf-8">
      <meta	http-equiv="Content-Language"	content="en">
    
      <style type="text/css">
      /*
        td+td+td+td {text-indent: -999em;}
        td:hover+td {color: #def; text-indent:0;}
        td:hover+td+td {color: #edf; text-indent:0;}
        td:hover+td+td+td {color: #fed; text-indent:0;}
      */  
        a+a+a+a {color: white;}
        a:hover+a {color: #def;}
        a:hover+a+a {color: #edf;}
        a:hover+a+a+a {color: #fed;}
        
        .mouse+.skip+.skip+.act {text-indent: -999em;}
        .mouse:hover+.skip {color: #def; text-indent:0;}
        .mouse:hover+.skip+.skip {color: #edf; text-indent:0;}
        .mouse:hover+.skip+.skip+.act{color: #fed; text-indent:0;}
        
    
      </style>
    
      
    
    </head><body>
    
      <table>
          <tr>
              <td>Hover me!</td>
              <td>Spectator</td>
              <td>Also a spectator</td>
              <td>Target</td>
          </tr>
      </table>
      
      <a href="#">Hover me!</a>
      <a href="#">Spectator</a>
      <a href="#">Also a spectator</a>
      <a href="#">Target</a>
      
        <table>
          <tr>
              <td class="mouse">Hover me!</td>
              <td class="skip">Spectator</td>
              <td class="skip">Also a spectator</td>
              <td class="act">Target</td>
          </tr>
      </table>
    
    </body></html>


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
  •