Задать вопрос
@Artem641
css

Как обратится к первой таблице в разметке?

Имеем три три одинаковый таблицы. Каждая имеет класс mytable. Вторая и третья имеют id
table_1 и table_2 соответственно. Как я могу в css обратится к первой таблице (хочу покрасить четные строки) используя только css?
Подчеркну, можно использовать только css.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table class='mytable' border='1px'>
    <thead>
        <th>Наименование</th>
        <th>Цена</th>
        <th>Количество</th>
      </thead>
    <tbody>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
  
  <table class='mytable' id='table_1'  border='1px'>
    <thead>
        <th>Наименование</th>
        <th>Цена</th>
        <th>Количество</th>
      </thead>
    <tbody>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
  
  <table class='mytable' id='table_2'  border='1px'>
    <thead>
        <th>Наименование</th>
        <th>Цена</th>
        <th>Количество</th>
      </thead>
    <tbody>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Хлеб</td>
        <td>25</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
  • Вопрос задан
  • 48 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer 
.mytable:not(#table_1):not(#table_2) {
  /* Таблица с классом .mytable, но не имеющая идентификаторов #table_1 и #table_2 */
}

.mytable:not([id]) {
  /* Таблица с классом .mytable, но не имеющая никаких идентификаторов */
}


Но гораздо лучшим вариантом будет дать отдельный класс нужной таблице

.table-striped {

}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа 
body table:first-of-type tr:nth-child(even) td { ... }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend разработчик
Базис-Центр • Коломна
от 30 000 до 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нужен человек с опытом работы с библиотекой SwiperJS
03 мая 2024, в 03:55
1000 руб./за проект
Скрипт для оценки ссылки через Virus Total
03 мая 2024, в 02:30
3000 руб./за проект
Переписать бота тг с питона на Go по ветке из гита
03 мая 2024, в 02:03
20000 руб./за проект
Ещё заказы