Кексби. Таблицы / Ячейки с номерами [8/9]

Курсы Эпичный курс «Кексби»
1

Что не так.JPG1208×788 76.3 KB

Что не так я делаю?

2

Кнопка “Проверить” не помогает?

3

Не помогает)

4

Ссылку на задание и код текстом, пожалуйста.

5

Html
<h2>Прайс-лист на услуги</h2> <table class="price-list"> <tr> <th class="price-number">№</th> <th class="price-number">Название услуги</th> <th class="price-number">Кто оказывает</th> <th class="price-number">Сколько стоит</th> </tr> <tr> <td class="price-number">1.</td> <td>Стрижка</td> <td>Грумер</td> <td>500 руб.</td> </tr> <tr> <td class="price-number">2.</td> <td>Заточка когтей</td> <td>Грумер</td> <td>300 руб.</td> </tr> <tr> <td class="price-number">3.</td> <td>Накрутка усов</td> <td>Грумер</td> <td>100 руб.</td> </tr> <tr> <td class="price-number">4.</td> <td>Подбор аксессуаров</td> <td>Стилист</td> <td>1550 руб.</td> </tr> </table> </div>
CSS
`.page-header,
.page-footer {
padding: 10px;
background-color: #eeeeee;
}

.page-footer {
margin-top: 20px;
}

.price-list {
width: 100%;
border-collapse: collapse;
}

.price-list th {
font-weight: normal;
text-align: left;
}

.price-list td {
border: 1px solid #333333;
}

.price-list th,
.price-list td {
padding: 5px 10px;
}

.price-list .price-number {
text-align: center;
}`

6

В цели 1 сказано:

Всем первым в рядах ячейкам <th> и <td> задайте класс price-number.

У вас все th “первые” получились.

1 лайк
7

Спасибо!

8

Вопрос по поводу избыточности класса для первых ячеек в таблицы.
Цель 1 Всем первым в рядах ячейкам <th> и <td> задайте класс price-number

Если у меня в таблице будет 250 позиций, я вынужден буду прописать для каждой ячейки класс, так же?
Не будет ли более простым и логичным использовать псевдоклассы ?

.price-list th:first-child,
.price-list td:first-child {
    text-align: center;    
}

Валидатор к сожалению этот вариант не пропускает.

1 лайк
9

@juwain, прокомментируйте, пожалуйста. Тоже был интересен этот момент.

2 лайка
10

В текущем решении у нас есть конкретная сущность — ячейка с номером, и ей задаются определённые стили. Эта ячейка может переместиться во вторую или третью по счёту колонку, и тогда стили станут неверными.

С отдельным классом можно без правки стилей просто поправить разметку при необходимости. В реальных условиях такие таблицы с данными генерируются с помощью шаблонизатора, так что прописывание классов каким-либо блокам автоматизируется и не создаёт лишних проблем.

1 лайк
11

Я бы хотел узнать, имеет ли место быть, этот код с псевдоклассами?
Можно ли его использовать в реальных проектах ?

P.S. Сам задал, сам ответил. Погуглил css с сайта Академии

.table td:first-child,.table th:first-child {
 padding-left:0
} 
.curriculum>:nth-child(2) {
 -webkit-order:-1;
 order:-1
}
 .breadcrumbs~.curriculums .curriculum:first-child .curriculum__info {
  top:-288px
 }
1 лайк