CSS for Prev Row

Question

I have a table where the data takes up two rows, so I am setting up a single row behavior across two rows. For example hover. The CSS below highlights two rows if the mouse enters via the top row, due to the:

table.table_form tbody tr.top:hover + tr

I need the reverse:

table.table_form tbody tr.bot:hover - tr

How do I do this?

So here is my CSS:

table.table_form tbody tr.bot:hover,
table.table_form tbody tr.top:hover,
table.table_form tbody tr.top:hover + tr {
  background: lighten($secondary, 10%);
  cursor: pointer;
}

And this HTML

<tr class="top-row " id="top6f3a4df1-1c3e-4453-9805-4ece86d504fc" data-pos="top" data-uuid="6f3a4df1-1c3e-4453-9805-4ece86d504fc">
        <th scope="col">
            <input class="table_input" type="text" value="SuperAdmin 1" data-orig="SuperAdmin 1">
        </th>
        <td>
            <input class="table_input" type="text" value="Australia" data-orig="Australia">
        </td>
        <td>
            <input class="table_input" type="text" value="Product" data-orig="Product">
        </td>
    </tr>
<tr class="bot-row bottom-border " id="bot6f3a4df1-1c3e-4453-9805-4ece86d504fc" data-pos="bot" data-uuid="6f3a4df1-1c3e-4453-9805-4ece86d504fc">
        <td>
            <input class="table_input" type="text" value="marclocchi13+1@gmail.com" data-orig="marclocchi13+1@gmail.com">
        </td>
        <td>
            <input class="table_input" type="text" value="" data-orig="">
        </td>
        <td colspan="2">
            <input class="table_input" type="text" value="" data-orig="">
        </td>
    </tr>

Possible duplicate of [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — Mohammad Usman, Jan 15 '18 at 06:27

score 1 · Accepted Answer · answered Jan 15 '18 at 10:27

There's no previous sibling CSS selector.

But you could simply re-structure the table so both input "rows" are actually inside a single td, and therefore, a single tr that can be highlighted on block.

input{
  width:100%;
}

<table>
  <tr id="top6f3a4df1-1c3e-4453-9805-4ece86d504fc" data-pos="top" data-uuid="6f3a4df1-1c3e-4453-9805-4ece86d504fc">
    <td>
      <input class="table_input" type="text" value="SuperAdmin 1" data-orig="SuperAdmin 1">
      <input class="table_input" type="text" value="marclocchi13+1@gmail.com" data-orig="marclocchi13+1@gmail.com">
    <td>
      <input class="table_input" type="text" value="Australia" data-orig="Australia">
      <input class="table_input" type="text" value="" data-orig="">
    </td>
    <td>
      <input class="table_input" type="text" value="Product" data-orig="Product">
      <input class="table_input" type="text" value="" data-orig="">
    </td>
  </tr>
  <tr id="top6f3a4df1-1c3e-4453-9805-4ece86d504fc" data-pos="top" data-uuid="6f3a4df1-1c3e-4453-9805-4ece86d504fc">
    <td>
      <input class="table_input" type="text" value="SuperAdmin 1" data-orig="SuperAdmin 1">
      <input class="table_input" type="text" value="marclocchi13+1@gmail.com" data-orig="marclocchi13+1@gmail.com">
    <td>
      <input class="table_input" type="text" value="Australia" data-orig="Australia">
      <input class="table_input" type="text" value="" data-orig="">
    </td>
    <td>
      <input class="table_input" type="text" value="Product" data-orig="Product">
      <input class="table_input" type="text" value="" data-orig="">
    </td>
  </tr>
</table>

Ahhh but the only problem is now that the layout is not a bunch of stacked cells. For example, top row has 8 cols, second row has 6... as some of the inputs span 2 cols — TheRealPapa, Jan 15 '18 at 22:45
@TheRealPapa use colspans and sub-tables (tables inside tables) when necessary. Just make sure to set border-collapse:collapse so it doesn't look like crap :p — Facundo Corradini, Jan 15 '18 at 23:25
Yes thanks I did it. More convoluted in terms of HTML but easier on the JS side. — TheRealPapa, Jan 16 '18 at 00:37

CSS for Prev Row

1 Answers1