Как обратится к первой таблице в разметке?
Имеем три три одинаковый таблицы. Каждая имеет класс 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> |
<!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>
Дополнительно:
Вы забыли tr в блоке thead во всех таблицах
.mytable:not(#table_1):not(#table_2) { /* Таблица с классом .mytable, но не имеющая идентификаторов #table_1 и #table_2 */ } .mytable:not([id]) { /* Таблица с классом .mytable, но не имеющая никаких идентификаторов */ } |
.mytable:not(#table_1):not(#table_2) { /* Таблица с классом .mytable, но не имеющая идентификаторов #table_1 и #table_2 */ } .mytable:not([id]) { /* Таблица с классом .mytable, но не имеющая никаких идентификаторов */ }
Но гораздо лучшим вариантом будет дать отдельный класс нужной таблице
.table-striped { } |
.table-striped { }
Ответы:
body table:first-of-type tr:nth-child(even) td { ... } |
body table:first-of-type tr:nth-child(even) td { ... }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для обращения к первой таблице в разметке HTML можно использовать селектор "table:first-child". Этот селектор выберет первый элемент таблицы в структуре документа.
Пример использования селектора в CSS:
table:first-child { /* стили для первой таблицы */ }
Если вы хотите обратиться к первой таблице с помощью JavaScript, можно сделать это следующим образом:
var firstTable = document.querySelector("table:first-child");
Этот код найдет первую таблицу в документе и сохранит ее в переменной firstTable, что позволит вам взаимодействовать с ней дальше.
Если вам нужно обратиться к первой таблице с помощью jQuery, то можно воспользоваться следующим кодом:
var firstTable = $("table:first");
Таким образом, вы сможете получить доступ к первой таблице в разметке HTML и работать с ней по вашему усмотрению.