multiple adjacent selectors.

**dresden_phoenix** · Oct 8, 2010 13:03

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?

**noonnope** · Oct 8, 2010 14:01

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.

**dresden_phoenix** · Oct 8, 2010 15:15

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

**noonnope** · Oct 8, 2010 15:25

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.

**deathshadow60** · Oct 8, 2010 16:06

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.

**dresden_phoenix** · Oct 8, 2010 23:10

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

**deathshadow60** · Oct 9, 2010 00:55

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...

**noonnope** · Oct 9, 2010 02:37

Originally Posted by dresden_phoenix

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>

User Tag List

Thread: multiple adjacent selectors.

Thread Tools

Display

multiple adjacent selectors.

Bookmarks

Bookmarks

Posting Permissions