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:
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.
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>;
}
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.
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:
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?
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:
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:
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
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>; }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!
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.
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!
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.
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?