Блог

Главная - Вопросы по программированию - Стиль первой строки таблицы группы, идентифицированной с помощью td classname, относящейся к другой строке

Стиль первой строки таблицы группы, идентифицированной с помощью td classname, относящейся к другой строке

#html #css #html-table #tablerow

#HTML #css #html-таблица #tablerow

Вопрос:

Как я могу изменить стиль первой строки группы строк (идентифицируемой td с классом подпункта), которая находится рядом с родственной строкой (идентифицируемой td с классом элемента):

HTML:

 <table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td class="item"></td>
    </tr>
    <tr>
      <td class="sub-item"><!-- I need to style this one --></td>
    </tr>
    <tr>
      <td class="sub-item"></td>
    </tr>
    <tr>
      <td class="sub-item"></td>
    </tr>
    <tr>
      <td class="item"></td>
    </tr>
    <tr>
      <td class="sub-item"><!-- I need to style this one --></td>
    </tr>
  </tbody>
</table>

Я хотел бы оформить вставкой-тенью все первые строки, соответствующие этому критерию.

Я безуспешно пытался использовать оператор sibling:

CSS:

 tr > td.item ~ tr > td.sub-item:first {}

Ответ №1:

С текущим кодом вам придется использовать :nth-[last]-child() 

 tr:first-child   tr .sub-item, tr:nth-last-child(2)   tr .sub-item {
  background-color: red
}  
 <table>
  <thead>

  </thead>
  <tbody>
    <tr>
      <td class="item">1</td>
    </tr>
    <tr>
      <td class="sub-item">2<!-- I need to style this one --></td>
    </tr>
    <tr>
      <td class="sub-item">3</td>
    </tr>
    <tr>
      <td class="sub-item">4</td>
    </tr>
    <tr>
      <td class="item">5</td>
    </tr>
    <tr>
      <td class="sub-item">6<!-- I need to style this one --></td>
    </tr>
  </tbody>
</table>

Кроме того, вы можете добавить класс tr и достичь желаемого.

 .row   tr .sub-item {
  background-color: red
}  
 <table>
  <thead>

  </thead>
  <tbody>
    <tr class="row">
      <td class="item">1</td>
    </tr>
    <tr>
      <td class="sub-item">2<!-- I need to style this one --></td>
    </tr>
    <tr>
      <td class="sub-item">3</td>
    </tr>
    <tr>
      <td class="sub-item">4</td>
    </tr>
    <tr class="row">
      <td class="item">5</td>
    </tr>
    <tr>
      <td class="sub-item">6<!-- I need to style this one --></td>
    </tr>
  </tbody>
</table>

Комментарии:

1. 1 — однако для завершения ответа, если предполагается просто изменить первую строку, вы также можете использовать :first-child

2. Отлично, все работает отлично! Код динамически создается библиотекой fullcalendar, но я прослушиваю процесс создания, чтобы добавить класс .row, а затем оценить ваше CSS-выражение. Я, наконец, использую второй вариант .строка tr .подпункт