Selection css in tables

Asked

Viewed 23 times

0

I’m trying to apply the css property of Selection to a css table, but it’s not working. I would have been able to do it otherwise. Follow 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>
  • 1

    Hello Yuri, can you explain better what you mean by "apply the css property of Selection to a css table"?

  • What would Selection be? when passing the mouse over changes the style of the element? Or when clicking changes ? What do you mean?

  • When I left click and drag it will select the content and apply the css

  • Selection activates when you select something with the mouse

  • ::selection {&#xA; color: white; &#xA; background: red;&#xA;}

  • is exactly that, but it n worked with the tr of the table

  • I need only in them

  • I tried to do also as follows, the first click equals the initial time and second equals the final time so it marks all content that is between the starting time and the final time.

Show 3 more comments

1 answer

0


You have to put the ::selection in the element that contains the text, in case you are assigning it to the tr, but the text is in td, then 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>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.