Selecting the 1st Row in Table RSS

• • Reply
  

  airic82

  Member

  78 Points

  223 Posts

  Selecting the 1st Row in Table

  Feb 20, 2013 07:11 PM|LINK

  Okay, so I have to admit I'd think this would be simpler than it's turning out to be, so i'm hoping someone out there has an easy answer.

  I have a class of styles I use to turn a table in to a grid (.tblGrid). Depending on the control I'm using I could end up with either of the following table layouts:

  <table class="tblGrid">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
    </thead>
  
    <tbody>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
      </tr>
    </tbody>
  </table>

  <table class="tblGrid">
    <tbody>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
      </tr>
    </tbody>
  </table>

  Both tables have the same layout, just one used the <thead> element and one does not.

  Now, I like to have a subtle hover effect to help guide people as they browse the data:

  table.tblGrid tbody tr:hover
  {
    background-color: #EEE;
  }

  The problem this causes in the second example is that the column headers (the <th> elements) still get the hover applied to them.

  So my generic solution is this:

  if (table does not have tbody)
  {
    do not highlight tr[0]
  }

  (Forgive the crude pseudocode.)

  I'm not sure how to apply this through CSS. I've tried this:

  table.tblGrid thead:hover, table.tblGrid > tbody tr:first-child:hover

  but that isn't quite specific enough since the tbody's parent is still the table, it's getting selected. My attempt was to select it only if it's the first child node.

  So then I tried:

  table.tblGrid tr:first-of-type:hover

  But again, the :first-of-type selector grabbed the first tr in thead and tbody.

  I hope I've shown enough to help people figure out the desired effect. I'd love some feedback.

  I know I can rely on classes, but since these are controls rendering things, I don't always have the luxery of specifying a class for at the row level.

  Any feedback would be greatly appreciated.

  Thanks!

  -Eric
  
  
  
  
  
  

• • Reply
  

  webJose

  Member

  730 Points

  186 Posts

  Re: Selecting the 1st Row in Table

  Feb 20, 2013 07:20 PM|LINK

  Have you tried the following?

  table.tblGrid tbody tr:hover
  {
    background-color: #EEE;
  }
  
  table.tblGrid tbody tr:hover th
  {
    background-color: <whatever color the header row should have as background>;
  }

  
  
  

• • Reply
  

  airic82

  Member

  78 Points

  223 Posts

  Re: Selecting the 1st Row in Table

  Feb 20, 2013 07:26 PM|LINK

  Jose:

  That's not quite what I'm trying to do. That'll always select the first row.

  Basically, I want to select the first row in thead or the first row in tbody (if there is no thead element).

  Thanks! 

• • Reply
  

  webJose

  Member

  730 Points

  186 Posts

  Re: Selecting the 1st Row in Table

  Feb 20, 2013 07:36 PM|LINK

  Well, CSS is all about the appearance.  It doesn't really help with anything else.  The CSS I proposed, if working, should be enough to eliminate the visual problem of selecting the titles.  Doesn't it?  I mean, yes, I know your CSS is selecting the titles row, but if there's no visual indication of that, why wouldn't you go for it?

  I also understand that a single CSS that behaves as expected would be ideal, but to be honest I'm not sure there is one.

  And a question for you:  If both controls get the same layout but one of them gives you such a hard time, wouldn't it be worth changing that control?  I mean, if at all possible.

• • Reply
  

  airic82

  Member

  78 Points

  223 Posts

  Re: Selecting the 1st Row in Table

  Feb 20, 2013 07:40 PM|LINK

  The problem is that different controls do totally different things, so I'm stuck with using both of them. I didn't design them, so....

  I just have to believe there's a way to select things as I specified.

  Thanks!

• • Reply
  

  webJose

  Member

  730 Points

  186 Posts

  Re: Selecting the 1st Row in Table

  Feb 20, 2013 07:47 PM|LINK

  Well, think about it:  You want to apply a style to element X depending on the type of children it has.  Are there CSS selectors for that?  I think not.  All CSS selectors I know apply the style to the element they select, and never to the parent.

  But as I wrote the paragraph, I thought about one possibility:

  table.tblGrid tbody tr:hover td
  {
    background-color: #EEE;
  }

  So on row hovering, change all cells' background color, but that only applies to TD cells, not TH cells.  Does it work?  Let me know.
  
  

• • Reply
  

  airic82

  Member

  78 Points

  223 Posts

  Re: Selecting the 1st Row in Table

  Feb 20, 2013 09:40 PM|LINK

  Oh! I missed the subtlty of what you did there.

  I guess my surprise is that I can't select the first-child of a specific element. Like > selects all root level children. Why not just the first child?