Можно выбрать 2-й столбец и добавить цвет фона для нечетной строки 2-го столбца? - PullRequest
Новая
       24

Можно выбрать 2-й столбец и добавить цвет фона для нечетной строки 2-го столбца?

0 голосов
/ 11 февраля 2019

Я хотел бы выбрать 2nd tr, а затем выбрать только odd td только с SCSS

Я просто не хочу добавлять больше javascript, если это может быть сделано с помощью CSS.Я пытался 

tr td:nth-child(2) {
  &::nth-child(odd) {
    backgroud: red;
  }


}

<table>
  <tr>
    <td>123</td>
    <td>345</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Это результат, который я ожидаю.Но только с селектором CSS, не использующим класс, как красный https://jsfiddle.net/9g436bds/

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Примечание. Ваш заголовок и текст в вашем вопросе задают разные вопросы.

Итак, сначала я отвечаю на текст внутри вопроса («выберите 2nd tr, а затем выберите только odd td»):

С или без SCSS, селектор для этого будет tr:nth-child(2) td:nth-child(odd): 

tr:nth-child(2) td:nth-child(odd) {
    background: red;
}
<table>
  <tr>
    <td>123</td>
    <td>345</td>
    <td>123</td>
    <td>345</td>
  </tr>
  <tr>
    <td>123</td>
    <td>345</td>
    <td>345</td>
    <td>765</td>
  </tr>
  <tr>
    <td>rtz</td>
    <td>123</td>
    <td>345</td>
    <td>gfd</td>
  </tr>
  <tr>
    <td>678</td>
    <td>123</td>
    <td>345</td>
    <td>bvc</td>
  </tr>
</table>

И вот ответ на вопрос в заголовке («выберите 2-й столбец и добавьте фон для отключения td»).Очень похожий селектор, но псевдо-классы развернулись: 

tr:nth-child(odd) td:nth-child(2) {
    background: red;
}
<table>
  <tr>
    <td>123</td>
    <td>345</td>
    <td>123</td>
    <td>345</td>
  </tr>
  <tr>
    <td>123</td>
    <td>345</td>
    <td>345</td>
    <td>765</td>
  </tr>
  <tr>
    <td>rtz</td>
    <td>123</td>
    <td>345</td>
    <td>gfd</td>
  </tr>
  <tr>
    <td>678</td>
    <td>123</td>
    <td>345</td>
    <td>bvc</td>
  </tr>
</table>
0 голосов
/ 11 февраля 2019

Один из способов сделать это, в зависимости от ваших потребностей, состоит в том, чтобы одновременно настроить таргетинг на tr и td 

tr td:nth-child(2) {
  background-color: grey;  
}

tr:nth-child(odd) td:nth-child(2) {
  background: blue;
}

https://codepen.io/anon/pen/jdxwBE

...