Как я могу нацелить эти TDS в CSS? - PullRequest
Новая
       25

Как я могу нацелить эти TDS в CSS?

0 голосов
/ 10 ноября 2018

Например, это мой HTML: 

<table>
    <tr>
        <td>Don't target this<td>
        <td>Target this<td>
    </tr>
    <tr>
        <td>Target this<td>
     </tr>
     <tr>
         <td>Target this<td>
      </tr>
</table>

И в моем css я не хочу нацелиться tr:first-child > td:first-child

Как этого добиться с помощью селектора :not()?

Например, это не работает 

table {
    tr:not(:first-child) {
        // eliminates entire child
    }
}

и 

table {
    tr {
        td:not(:first-child) {
            // eliminates all tds that are first-child
         }
     }
 }

РЕДАКТИРОВАТЬ: Я знаю, что могу использовать :last-child(), но хочу добиться этого с :not()

1 Ответ

0 голосов
/ 10 ноября 2018

Вы можете настроить таргетинг на last-child каждой строки 

tr > td:last-child {
  color:red;
}
<table>
  <tr>
    <td>Don't target this</td>
    <td>Target this</td>
  </tr>
  <tr>
    <td>Target this</td>
  </tr>
  <tr>
    <td>Target this</td>
  </tr>
</table>

А если у вас будет много столбцов, вам понадобится как минимум два селектора: 

tr:not(:first-child) > td,
tr:first-child > td:not(:first-child){
  color:red;
}
<table>
  <tr>
    <td>Don't target this</td>
    <td>Target this</td>
  </tr>
  <tr>
    <td>Target this</td>
    <td>Target this</td>
    <td>Target this</td>
  </tr>
  <tr>
    <td>Target this</td>
    <td>Target this</td>
  </tr>
</table>
...