Задать вопрос
@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>
  • Вопрос задан
  • 49 просмотров
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 { ... }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать телеграм mini app игру и бота
23 нояб. 2024, в 20:48
40000 руб./за проект
Ведение блогоаи продвижение в Instagram, TikTok и Телеграмм
23 нояб. 2024, в 20:46
50000 руб./за проект
Доработки шаблона Wordpress
23 нояб. 2024, в 20:39
3000 руб./за проект
Ещё заказы