Не применяется стиль css к в

Question

Допустим я выбираю в css td с помощью следующего селектора:

div.weekendcell > td {
    font-weight: bold;
    text-decoration: line-through;
}

div.simplecell> td {
    font-weight: bold;
}

И пытаюсь сгруппировать несколько клеток таблицы с помощью div:

<table>
    <tr>
        <div class="weekendcell"> 
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </div>

        <div class="simplecell"> 
            <td>2</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </div>
    </tr>
</table>

В итоге стиль по каким-то причинам не применяется к td,хотелось бы узнать почему

Answer 1

Посмотрите в "Инструментах разработчика" браузера, как выглядит DOM для Вашего html-а. Удивитесь.

Неправильно:

div.weekendcell>td {
  font-weight: bold;
  text-decoration: line-through;
}

<table>
  <div class="weekendcell">
    <td>1</td>
    <td>2</td>
  </div>
</table>

Правильно:

tr.weekendcell>td {
  font-weight: bold;
  text-decoration: line-through;
}

<table>
  <tr class="weekendcell">
    <td>1</td>
    <td>2</td>
  </tr>
</table>

td:nth-child(n+1):nth-child(-n+8) {
  font-weight: bold;
  text-decoration: line-through;
}

td:nth-child(n+9):nth-child(-n+14) {
  font-weight: bold;
  color: green;
}

<table>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>

    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

Answer 2

Давайте класс самим ячейкам:

<table>
    <tr>
       <td class="weekendcell">1</td>
       <td class="weekendcell">2</td>
    </tr>
</table>

td.weekendcell {
    font-weight: bold;
    text-decoration: line-through;
}

Также можно использовать colgroup:

colgroup col.cell-a {background-color: #fcc;}
colgroup col.cell-b {background-color: #cfc;}

<table>
  <colgroup>
    <col span="2" class="cell-a">
    <col class="cell-b">
  </colgroup>
  <tr>
    <th>A1</th>
    <th>A2</th>
    <th>B1</th>
  </tr>
  <tr>
    <td>1. A1 </td>
    <td>1. A2</td>
    <td>1. B1</td>
  </tr>
  <tr>
    <td>2. A1 </td>
    <td>2. A2</td>
    <td>2. B1</td>
  </tr>
</table>

Answer 3

Как вариант вот так

tr.weekendcell > td {
    font-weight: bold;
    text-decoration: line-through;
}

tr.simplecell> td {
    font-weight: bold;
}

<table>
<tbody>
    <tr class="weekendcell">             
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>

        <tr class="simplecell"> 
            <td>2</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
   </tbody>
</table>

БЛОГ НА HUSL

Не применяется стиль css к в

Ответы (3 шт):