На практике, при работе с CSS, часто может стоять такая задача, что нужно выбрать какой-то элемент на веб-странице, который находится внутри другого элемента.
Предположим, у нас есть элемент table.
<table id="table1"> <tr> <td>Элемент 1</td> <td>Элемент 2</td> <td>Элемент 3</td> </tr> </table>
В нем есть вложенные элементы tr и td.
Давайте создадим еще одну аналогичную таблицу, но с id="table2":
<table id="table2"> <tr> <td>Элемент 1</td> <td>Элемент 2</td> <td>Элемент 3</td> </tr> </table>
Предположим, что у нас стоит задача, сделать все элементы td внутри table1 синим цветом, а все элементы td внутри table2 красным цветом.
Причем, у элемента td нет никакого класса и идентификатора, по которому можно было бы сделать выборку.
Давайте подумаем как можно решить эту задачу.
Если просто воспользоваться селектором td, то мы не сможем с вами отделить элементы td внутри первой и второй таблицы.
Решить эту проблему поможет специальный синтаксис CSS, который позволяет выбирать элементы внутри других элементов.
Для этого сначала, мы используем селектор идентификатора и для того, чтобы указать, что мы хотим обратиться к какому-то элементу, который находится внутри другого элемента, нужно воспользоваться знаком пробел.
Например:
#table1 td { color:blue; }
Этой записью мы говорим, что нужно применить стили CSS к элементу td, который находится внутри элемента с id="table1".
С селекторами CSS, которые позволяют обращаться к элементам внутри других элементов приходиться встречаться довольно часто на практике. Попробуйте и поэкспериментируйте с этим, в будущем, это может пригодиться.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти