Combining :hover and :nth-child

Report · May 04, 2017

I'm working on converting a batch of old templates from some well meaning attempts to create web pages by someone who knows just enough to be dangerous (all embedded style-sheets, all layout is done with structural tables, XHTML 1.0 is mixed with HTML 5, etc.), and I'm taking this one document at a time.

One of the requirements is if a table (and yes, a few of these pages do still require structural tables, as much as I'd like to rip that right out across the board) has more than one data column (nearly all the tables have a header column and at least one data column), then every other data column needs to be shaded, or in other words, alternating column colors.

A feature I've added in is the ability to hover over a row and have the whole row turn gray. Due to corporate policy, I've only got a handful of colors to work with, so while I'd love to create a custom color that "pops" on the hover, I'm hoping to stick with the pre-defined color of gray.

Problem is, the two grays (the alternating column color and the hover highlight) are identical. What I'd like to do is have the hovered highlight to invert (return to the document's background color) when the row is highlighted on one of these alternating columns.

Here's what I've come up with:

tr:hover { background-color: #f5f5f5; } col.data_columns:nth-child(odd) { background-color: #f5f5f5; } tr:hover + col.data_columns:nth-child(odd) { background-color: white; }

Problem is, it's not working. Any idea what I may be doing wrong on this?

Report · May 04, 2017

Is this what you're trying to do?

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

table {width: 600px; border: 1px solid #555;}

tr:nth-child(even){

background-color: white;

}

tr:nth-child(odd){

background-color: #EEE;

}

tr:hover{

background-color: #EEE;

}

tr:nth-child(odd):hover{

background-color: white;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 04, 2017

You'll need to add a non-break space to table cells. This forum strips them out for some reason.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 04, 2017

Nancy OShea

I used what you posted as a fresh prototype and cobbled together something more like what I'm actually dealing with (code has been significantly adapted, I can't stand serif fonts 😞

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
  width: 100%;
  border: 1px solid #555;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-collapse: collapse;
}
tr:hover{
background-color: #EEE;
}
col.data-column:nth-child(odd) {
  background-color: #eee;
}
.data-column {
}
.row-header {
  width: 20%;
}
thead th {
  border-bottom-width: medium;
  border-bottom-style: double;
  color: #FFFFFF;
  background-color: #000000;
}
tbody th {
  border-right-width: medium;
  border-right-style: double;
  background-color: #C7C8CA;
}
tr:hover col.data-column:nth-child(odd)  {
  background-color: white;
}
tr td:nth-child(odd):hover   {
  background-color: white;
}
</style>
</head>
<body>
<table>
  <colgroup>
  <col class="row-header">
  <col class="data-column">
  <col class="data-column">
  <col class="data-column">
  <col class="data-column">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">asdf</th>
      <th scope="col">asdf</th>
      <th scope="col">asdf</th>
      <th scope="col">asdf</th>
      <th scope="col">asdf</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">asdf</th>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
    <tr>
      <th scope="row">asdf</th>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
    <tr>
      <th scope="row">asdf</th>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
      <td>asdf</td>
    </tr>
  </tbody>
</table>
<table border="1" cellpadding="2" cellspacing="2">
      <colgroup>
      <col class="row-header">
      <col class="data-column">
      <col class="data-column">
      </colgroup>
<caption>
[CLASS] Pricing
</caption>
<thead>
  <tr>
    <th scope="col">Location Number(s)</th>
    <th scope="col">[LOCNUM1]</th>
    <th scope="col">[LOCNUM2]</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">City & State or County & State</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Website </th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Contact Title</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Contact Phone #</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Contract #</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Contract Group #</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Contract Notes</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Summary Routed Account #</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Serviced By (City, ST)</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Collection
      Start & End Times (Time Zone)</th>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th scope="row">Promotions</th>
    <td> </td>
    <td> </td>
  </tr>
</tbody>
    </table>
</body>
</html>

This is generally what I want to do, but you'll notice when you run it on the top table that only the one cell in the hovered column is highlighted. This will do going forward if there isn't a better solution, but I was hoping for some way to invert the colors of the entire row, not just the one cell.

Report · May 04, 2017

Oh, for heaven's sake! That was not helpful, nor did it do what I expected! UX FAIL, Adobe staff!

Trying the code again:

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

table {

width: 100%;

border: 1px solid #555;

width: 100%;

margin-top: 20px;

margin-bottom: 20px;

font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

border-collapse: collapse;

}

tr:hover{

background-color: #EEE;

}

col.data-column:nth-child(odd) {

background-color: #eee;

}

.data-column {

}

.row-header {

width: 20%;

}

thead th {

border-bottom-width: medium;

border-bottom-style: double;

color: #FFFFFF;

background-color: #000000;

}

tbody th {

border-right-width: medium;

border-right-style: double;

background-color: #C7C8CA;

}

tr:hover col.data-column:nth-child(odd) {

background-color: white;

}

tr td:nth-child(odd):hover {

background-color: white;

}

</style>

</head>

<body>

<table>

</colgroup>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</colgroup>

[CLASS] Pricing

</caption>

<thead>

<tr>

<th scope="col">Location Number(s)</th>

<th scope="col">[LOCNUM1]</th>

<th scope="col">[LOCNUM2]</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">City & State or County & State</th>

</tr>

<tr>

<th scope="row">Website </th>

</tr>

<tr>

<th scope="row">Contact Title</th>

</tr>

<tr>

<th scope="row">Contact Phone #</th>

</tr>

<tr>

<th scope="row">Contract #</th>

</tr>

<tr>

<th scope="row">Contract Group #</th>

</tr>

<tr>

<th scope="row">Contract Notes</th>

</tr>

<tr>

<th scope="row">Summary Routed Account #</th>

</tr>

<tr>

<th scope="row">Serviced By (City, ST)</th>

</tr>

<tr>

<th scope="row">Collection

Start & End Times (Time Zone)</th>

</tr>

<tr>

<th scope="row">Promotions</th>

</tr>

</tbody>

</table>

</body>

</html>

Report · May 04, 2017

I prefer nth-of-type which would be, (I think ) -

tr col.data_columns::nth-of-type(odd):hover { background-color: white; }

also is your col.data_columns a class?

If so it would require the class identifier.

Report · May 04, 2017

also is your col.data_columns a class?
If so it would require the class identifier.

I'm not sure how you mean, unless you're talking about the id="x" attribute, in which case, no, it is not a unique identifier.

Adobe Community

Combining :hover and :nth-child