3

Ниже привел пример кода, через :child выбрать не получается – класс ищется у первой ячейки, а не первой с таким классом:

tr td.red:first-child {
  background: red;
}
<div>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td class="red">1</td>
        <td class="red">1</td>
        <td class="red">1</td>
      </tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td class="red">1</td>
      <td class="red">1</td>
      <tr>
      </tr>
    </tbody>
  </table>
</div>

1
  • Нет, селектора для выбора n-ного элемента по определенному классу не существует. По типу элемента - можно. По классу - нет. 22 ноя 2018 в 12:42

2 ответа 2

2

Обратите внимание, что ваша разметка таблицы невалидна. Ячейки td не могут быть у tbody без tr. Подробнее про селектор можно перевести тут. Если вкратце, то + .red означает, что следующая ячейка с class="red" после ячейки без класса red :not(.red) будет закрашена красным.

.red:first-child, :not(.red) + .red {
    background: red;
}
<div>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td class="red">1</td>
        <td class="red">1</td>
        <td class="red">1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td class="red">1</td>
        <td class="red">1</td>
      </tr>
    </tbody>
  </table>
</div>

5
  • смысл выбрать любую определенную ячейку а не только первую, вообще возможно ли это
    – engenes
    22 ноя 2018 в 12:03
  • @ЕвгенийШевцов так какую вам ячейку надо выбрать? Решение именно под вашу формулировку вопроса. Если все, то .red {} или :not(.red) ~ .red {} 22 ноя 2018 в 12:05
  • Или все кроме последних .red:not(:last-child) {}. Переформулируйте пожалуйста конкретнее задачу 22 ноя 2018 в 12:11
  • изменил сам заголовок вопроса, хочу именно привязаться к определенной ячейке, с классом red. например второй, третьей
    – engenes
    23 ноя 2018 в 4:01
  • так не получится если это тот же элемент и классы могут быть не у всех ячеек. Хотя, наверно тут через JS можно попробовать, но точно не стилями 23 ноя 2018 в 10:02
0
td.red:nth-of-type(1) // или 2 или 3 и тд, можно через запятую

или

td.red:first-of-type
td.red:last-of-type

если я конечно правильно вопрос понял

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.