hover this + after and this (n+1) and before

Question

HTML:

<table class="table_database_edit">
<tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usuń</td></tr>
<tr class="more" id=""><td colspan="3">aa</td></tr>
<tr><td>test</td><td>Edytuj</td><td>Usuń</td></tr>
<tr class="more" id=""><td colspan="3">aa</td></tr>
</table>

CSS:

tr.more{
    #display: none;
}
table.table_database_edit{
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit  tr:nth-child(4n+3), table.table_database_edit  tr:nth-child(4n+4){
    background-color: #EFF0F1;
}
table.table_database_edit  tr:hover:nth-child(n) + tr:nth-child(n):after{
    background-color: #FFFFCC;
}
table.table_database_edit  tr:hover:nth-child(n+1) + tr:nth-child(n+1):before{
    background-color: #FFFFCC;
}

I have table. Every two rows is a group. The groups alternate background color. Rows 1 and 2 are white. Rows 3 and 4 are gray. Rows 5 and 6 are white. Etc.

I want to set the background-color to yellow when you hover over a group. How I can do it?

What's `#display: none;` meant to do? CSS comment syntax is `/* comment */`. — David Thomas, Jan 28 '13 at 00:44

score 6 · Accepted Answer · answered Jan 28 '13 at 00:40

What you're looking for is tbody. The tbody element is similar to colgroup, but used for grouping rows. From there, the CSS is simple:

<table class="table_database_edit">
    <tbody>
        <tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>

    <tbody>
        <tr><td>test</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>
</table>

CSS:

tr.more{
    #display: none;
}
table.table_database_edit{
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit  tbody:nth-child(odd) tr {
    background-color: #EFF0F1;
}

table.table_database_edit  tbody:hover tr {
    background-color: #FFFFCC;
}

http://jsfiddle.net/rqJAY/13/

I thought 'tbody' is not akcept with most web browser, because I see in Firefox always add this tag. — Peter, Jan 28 '13 at 00:51
If you don't insert a `tbody` tag, an anonymous one will typically be added by the browser. I add an implicit `tbody` in most of my tables, since I will style `th` tags differently depending on whether they appear within a `thead`, `tbody`, or `tfoot` tag. — cimmanon, Jan 28 '13 at 00:53

score 2 · Answer 2 · edited May 23 '17 at 12:30

You will have to modify your HTML or use javascript. I thought about this a bit and I think the answer is 'no' due to one reason.

There is no 'previous sibling' selector in CSS. You use before and after in your example code, but these pseduo-selectors are for inserting content, not for modifying the CSS attributes of siblings.

The closest is the adjacent sibling combinator, but it only selects the next sibling. There is no previous sibling selector available. So you can highlight both rows when over the first row, but not the first row when over the second.

http://jsfiddle.net/rqJAY/2/

I thought about using classes, but again the lack of a previous sibling combinator spells disaster. Unless you did something like assign a unique class to every single grouping. That would result in a lot of redundant html and css.

You will need to modify your HTML or use javascript. If you can modify the HTML I would abandon the table and use divs instead. If you can use javascript it is relatively trivial to implement.

--edit

I didn't realize you could declare multiple tbody's in a single table. This definitely seems the way to go if you can modify the html.

This is the same thing I just came up with: not without a previous selector (which doesn't exist) — Joe, Jan 27 '13 at 23:13

Mikael Kessler · Answer 3 · 2013-01-28T00:06:29.043

Not sure if this is exactly what you're looking for, but here's a solution using jQuery and CSS. This will be a better cross-browser solution as CSS :nth-child isn't supported by all major browsers yet.

jQuery:

//Add group classes to rows
$('table.table_database_edit tr').each(function () {
    if ($('.table_database_edit tr').index($(this)) + 1 !== 1 && ($('.table_database_edit tr').index($(this)) + 1) % 4 === 0) {
        $(this).removeClass('groupOne').addClass('groupTwo');
        $(this).prev().removeClass('groupOne').addClass('groupTwo');
    } else {
        $(this).addClass('groupOne');
        $(this).next().addClass('groupOne');
    }
});

//Highlight groups of two
$('table.table_database_edit tr').hover(function () {
    if ($('.table_database_edit tr').index($(this)) === 0 || $('.table_database_edit tr').index($(this)) % 2 === 0) {
        $(this).addClass('highlight');
        $(this).next().addClass('highlight');
    } else {
        $(this).addClass('highlight');
        $(this).prev().addClass('highlight');
    }
}, function () {
    $('.table_database_edit tr').removeClass('highlight');
});

CSS:

table.table_database_edit {
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit tr.groupOne {
    background-color: #fff;
}
table.table_database_edit tr.groupTwo {
    background-color: #EFF0F1;
}
table.table_database_edit tr.highlight {
    background-color: yellow;
}

Let me know if you need me to tweak it!

Complete Solution: Updated JSFiddle - Unlimited Grouping

Are you sure you posted the correct fiddle url? Only one row is highlighting on hover. — mrtsherman, Jan 27 '13 at 22:55
Wasn't sure if he wanted them individually changed on hover or as a group. Updated the answer with 2nd fiddle. — Mikael Kessler, Jan 27 '13 at 23:08
Updated answer again to accomodate for correct grouping no matter how many rows exist. I know you'd prefer a non JS solution, but not sure it's possible to create the desired effect with pure CSS. Check out the new fiddle. — Mikael Kessler, Jan 28 '13 at 00:02

hover this + after and this (n+1) and before

3 Answers3