6 Replies Latest reply on May 4, 2017 1:00 PM by Princess Columbia

    Combining :hover and :nth-child

    Princess Columbia

      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?

        • 1. Re: Combining :hover and :nth-child
          Nancy OShea Adobe Community Professional & MVP

          Is this what you're trying to do?

           

          <!doctype html>

          <html>

          <head>

          <meta charset="utf-8">

          <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>

          <td> </td>

          <td> </td>

          </tr>

          <tr>

          <td> </td>

          <td> </td>

          </tr>

          <tr>

          <td> </td>

          <td> </td>

          </tr>

          <tr>

          <td> </td>

          <td> </td>

          </tr>

          </table>

          </body>

          </html>

          1 person found this helpful
          • 2. Re: Combining :hover and :nth-child
            Nancy OShea Adobe Community Professional & MVP

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

             

             

            Nancy

            • 3. Re: Combining :hover and :nth-child
              pziecina Adobe Community Professional

              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.

              1 person found this helpful
              • 4. Re: Combining :hover and :nth-child
                Princess Columbia Level 1

                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 ):

                                                                                                                                                                                             
                asdfasdfasdfasdfasdf
                asdfasdfasdfasdfasdf
                asdfasdfasdfasdfasdf
                asdfasdfasdfasdfasdf
                                                                                                                                                                                                                                                 
                [CLASS] Pricing
                Location Number(s)[LOCNUM1][LOCNUM2]
                City & State or County & State  
                Website  
                Contact Title  
                Contact Phone #  
                Contract #  
                Contract Group #  
                Contract Notes  
                Summary Routed Account #  
                Serviced By (City, ST)  
                Collection       Start & End Times (Time Zone)  
                Promotions  

                 

                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.

                • 5. Re: Combining :hover and :nth-child
                  Princess Columbia Level 1

                  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>

                  <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 &amp; State or County &amp; 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 &amp; 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>

                  • 6. Re: Combining :hover and :nth-child
                    Princess Columbia Level 1

                    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.