Selection css in tables

Navigation
0

I'm trying to apply the selection css property to a css table, but it's not working. I'd have to do it another way. Here is the code below. 

<style>
  .hora::selection{
    background-color: #000;
  }
</style>
<table class="table table-hover">
            <tr class="hora">
              <td>06:00</td>
            </tr>
            <tr class="hora">
              <td>06:15</td>
            </tr>
            <tr class="hora">
              <td>06:30</td>
            </tr>
            <tr class="hora">
              <td>06:45</td>
            </tr>
            <tr class="hora">
              <td>07:00</td>
            </tr>
            <tr class="hora">
              <td>07:15</td>
            </tr>
            <tr class="hora">
              <td>07:30</td>
            </tr>
            <tr class="hora">
              <td>07:45</td>
            </tr>
            <tr class="hora">
              <td>08:00</td>
            </tr>
            <tr class="hora">
              <td>08:15</td>
            </tr>
            <tr class="hora">
              <td>08:30</td>
            </tr>
            <tr class="hora">
              <td>08:45</td>
            </tr>
            <tr class="hora">
              <td>09:00</td>
            </tr>
            <tr class="hora">
              <td>09:15</td>
            </tr>
            <tr class="hora">
              <td>09:30</td>
            </tr>
            <tr class="hora">
              <td>09:45</td>
            </tr>
            <tr class="hora">
              <td>10:00</td>
            </tr>
            <tr class="hora">
              <td>10:15</td>
            </tr>
            <tr class="hora">
              <td>10:30</td>
            </tr>
            <tr class="hora">
              <td>10:45</td>
            </tr>
            <tr class="hora">
              <td>11:00</td>
            </tr>
            <tr class="hora">
              <td>11:15</td>
            </tr>
            <tr class="hora">
              <td>11:30</td>
            </tr>
            <tr class="hora">
              <td>11:45</td>
            </tr>
            <tr class="hora">
              <td>12:00</td>
            </tr>
            <tr class="hora">
              <td>12:15</td>
            </tr>
            <tr class="hora">
              <td>12:30</td>
            </tr>
            <tr class="hora">
              <td>12:45</td>
            </tr>
            <tr class="hora">
              <td>13:00</td>
            </tr>
            <tr class="hora">
              <td>13:15</td>
            </tr>
            <tr class="hora">
              <td>13:30</td>
            </tr>
            <tr class="hora">
              <td>13:45</td>
            </tr>
            <tr class="hora">
              <td>14:00</td>
            </tr>
            <tr class="hora">
              <td>14:15</td>
            </tr>
            <tr class="hora">
              <td>14:30</td>
            </tr>
            <tr class="hora">
              <td>14:45</td>
            </tr>
            <tr class="hora">
              <td>15:00</td>
            </tr>
            <tr class="hora">
              <td>15:15</td>
            </tr>
            <tr class="hora">
              <td>15:30</td>
            </tr>
            <tr class="hora">
              <td>15:45</td>
            </tr>
            <tr class="hora">
              <td>16:00</td>
            </tr>
            <tr class="hora">
              <td>16:15</td>
            </tr>
            <tr class="hora">
              <td>16:30</td>
            </tr>
            <tr class="hora">
              <td>16:45</td>
            </tr>
            <tr class="hora">
              <td>17:00</td>
            </tr>
            <tr class="hora">
              <td>17:15</td>
            </tr>
            <tr class="hora">
              <td>17:30</td>
            </tr>
            <tr class="hora">
              <td>17:45</td>
            </tr>
            <tr class="hora">
              <td>18:00</td>
            </tr>
            <tr class="hora">
              <td>18:15</td>
            </tr>
            <tr class="hora">
              <td>18:30</td>
            </tr>
            <tr class="hora">
              <td>18:45</td>
            </tr>
            <tr class="hora">
              <td>19:00</td>
            </tr>
            <tr class="hora">
              <td>19:15</td>
            </tr>
            <tr class="hora">
              <td>19:30</td>
            </tr>
            <tr class="hora">
              <td>19:45</td>
            </tr>
            <tr class="hora">
              <td>20:00</td>
            </tr>
            <tr class="hora">
              <td>20:15</td>
            </tr>
            <tr class="hora">
              <td>20:30</td>
            </tr>
            <tr class="hora">
              <td>20:45</td>
            </tr>
            <tr class="hora">
              <td>21:00</td>
            </tr>
            <tr class="hora">
              <td>21:15</td>
            </tr>
            <tr class="hora">
              <td>21:30</td>
            </tr>
            <tr class="hora">
              <td>21:45</td>
            </tr>
            <tr class="hora">
              <td>22:00</td>
            </tr>
            <tr class="hora">
              <td>22:15</td>
            </tr>
            <tr class="hora">
              <td>22:30</td>
            </tr>
            <tr class="hora">
              <td>22:45</td>
            </tr>
            <tr class="hora">
              <td>23:00</td>
            </tr>
            <tr class="hora">
              <td>23:15</td>
            </tr>
            <tr class="hora">
              <td>23:30</td>
            </tr>
            <tr class="hora">
              <td>23:45</td>
            </tr>
            <tr class="hora">
              <td>24:00</td>
            </tr>
          </table>
    
asked by anonymous 28.08.2017 / 13:34

1 answer

0

You have to put ::selection in the element that contains the text, in case you are assigning it to tr , but the text is in td , so I believe this selector solves your problem: 

.hora td:first-child::selection {
      color: white;
      background: red;
}


.hora {
  background-color: #000;
}

.hora td:first-child::selection {
  color: white;
  background: red;
}
<table class="table table-hover">
  <tr class="hora">
    <td>06:00</td>
  </tr>
  <tr class="hora">
    <td>06:15</td>
  </tr>
  <tr class="hora">
    <td>06:30</td>
  </tr>
  <tr class="hora">
    <td>06:45</td>
  </tr>
  <tr class="hora">
    <td>07:00</td>
  </tr>
  <tr class="hora">
    <td>07:15</td>
  </tr>
  <tr class="hora">
    <td>07:30</td>
  </tr>
  <tr class="hora">
    <td>07:45</td>
  </tr>
  <tr class="hora">
    <td>08:00</td>
  </tr>
  <tr class="hora">
    <td>08:15</td>
  </tr>
  <tr class="hora">
    <td>08:30</td>
  </tr>
  <tr class="hora">
    <td>08:45</td>
  </tr>
  <tr class="hora">
    <td>09:00</td>
  </tr>
  <tr class="hora">
    <td>09:15</td>
  </tr>
  <tr class="hora">
    <td>09:30</td>
  </tr>
  <tr class="hora">
    <td>09:45</td>
  </tr>
  <tr class="hora">
    <td>10:00</td>
  </tr>
  <tr class="hora">
    <td>10:15</td>
  </tr>
  <tr class="hora">
    <td>10:30</td>
  </tr>
  <tr class="hora">
    <td>10:45</td>
  </tr>
  <tr class="hora">
    <td>11:00</td>
  </tr>
  <tr class="hora">
    <td>11:15</td>
  </tr>
  <tr class="hora">
    <td>11:30</td>
  </tr>
  <tr class="hora">
    <td>11:45</td>
  </tr>
  <tr class="hora">
    <td>12:00</td>
  </tr>
  <tr class="hora">
    <td>12:15</td>
  </tr>
  <tr class="hora">
    <td>12:30</td>
  </tr>
  <tr class="hora">
    <td>12:45</td>
  </tr>
  <tr class="hora">
    <td>13:00</td>
  </tr>
  <tr class="hora">
    <td>13:15</td>
  </tr>
  <tr class="hora">
    <td>13:30</td>
  </tr>
  <tr class="hora">
    <td>13:45</td>
  </tr>
  <tr class="hora">
    <td>14:00</td>
  </tr>
  <tr class="hora">
    <td>14:15</td>
  </tr>
  <tr class="hora">
    <td>14:30</td>
  </tr>
  <tr class="hora">
    <td>14:45</td>
  </tr>
  <tr class="hora">
    <td>15:00</td>
  </tr>
  <tr class="hora">
    <td>15:15</td>
  </tr>
  <tr class="hora">
    <td>15:30</td>
  </tr>
  <tr class="hora">
    <td>15:45</td>
  </tr>
  <tr class="hora">
    <td>16:00</td>
  </tr>
  <tr class="hora">
    <td>16:15</td>
  </tr>
  <tr class="hora">
    <td>16:30</td>
  </tr>
  <tr class="hora">
    <td>16:45</td>
  </tr>
  <tr class="hora">
    <td>17:00</td>
  </tr>
  <tr class="hora">
    <td>17:15</td>
  </tr>
  <tr class="hora">
    <td>17:30</td>
  </tr>
  <tr class="hora">
    <td>17:45</td>
  </tr>
  <tr class="hora">
    <td>18:00</td>
  </tr>
  <tr class="hora">
    <td>18:15</td>
  </tr>
  <tr class="hora">
    <td>18:30</td>
  </tr>
  <tr class="hora">
    <td>18:45</td>
  </tr>
  <tr class="hora">
    <td>19:00</td>
  </tr>
  <tr class="hora">
    <td>19:15</td>
  </tr>
  <tr class="hora">
    <td>19:30</td>
  </tr>
  <tr class="hora">
    <td>19:45</td>
  </tr>
  <tr class="hora">
    <td>20:00</td>
  </tr>
  <tr class="hora">
    <td>20:15</td>
  </tr>
  <tr class="hora">
    <td>20:30</td>
  </tr>
  <tr class="hora">
    <td>20:45</td>
  </tr>
  <tr class="hora">
    <td>21:00</td>
  </tr>
  <tr class="hora">
    <td>21:15</td>
  </tr>
  <tr class="hora">
    <td>21:30</td>
  </tr>
  <tr class="hora">
    <td>21:45</td>
  </tr>
  <tr class="hora">
    <td>22:00</td>
  </tr>
  <tr class="hora">
    <td>22:15</td>
  </tr>
  <tr class="hora">
    <td>22:30</td>
  </tr>
  <tr class="hora">
    <td>22:45</td>
  </tr>
  <tr class="hora">
    <td>23:00</td>
  </tr>
  <tr class="hora">
    <td>23:15</td>
  </tr>
  <tr class="hora">
    <td>23:30</td>
  </tr>
  <tr class="hora">
    <td>23:45</td>
  </tr>
  <tr class="hora">
    <td>24:00</td>
  </tr>
</table>
    
28.08.2017 / 13:52
More elegant ways to reverse integers, arrays, and strings in Python Send data along with form