Выбор элементов внутри других элементов на CSS.
На практике, при работе с CSS, часто может стоять такая задача, что нужно выбрать какой-то элемент на веб-странице, который находится внутри другого элемента.
Предположим, у нас есть элемент table.
| Элемент 1 | Элемент 2 | Элемент 3 |
В нем есть вложенные элементы tr и td.
Давайте создадим еще одну аналогичную таблицу, но с >
| Элемент 1 | Элемент 2 | Элемент 3 |
Предположим, что у нас стоит задача, сделать все элементы td внутри table1 синим цветом, а все элементы td внутри table2 красным цветом.
Причем, у элемента td нет никакого класса и идентификатора, по которому можно было бы сделать выборку.
Давайте подумаем как можно решить эту задачу.
Если просто воспользоваться селектором td, то мы не сможем с вами отделить элементы td внутри первой и второй таблицы.
Решить эту проблему поможет специальный синтаксис CSS, который позволяет выбирать элементы внутри других элементов.
Для этого сначала, мы используем селектор идентификатора и для того, чтобы указать, что мы хотим обратиться к какому-то элементу, который находится внутри другого элемента, нужно воспользоваться знаком пробел.
Этой записью мы говорим, что нужно применить стили CSS к элементу td, который находится внутри элемента с >
С селекторами CSS, которые позволяют обращаться к элементам внутри других элементов приходиться встречаться довольно часто на практике. Попробуйте и поэкспериментируйте с этим, в будущем, это может пригодиться.
Дмитрий Ченгаев 💎
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2022-03-24
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Свойства узлов: тип, тег и содержимое
Теперь давайте более внимательно взглянем на DOM-узлы.
В этой главе мы подробнее разберём, что они собой представляют и изучим их основные свойства.
Классы DOM-узлов
Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
На рисунке ниже изображены основные классы:
Существуют следующие классы:
- EventTarget – это корневой «абстрактный» класс для всего. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
- Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode , nextSibling , childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуются от него (и следовательно наследуют функционал Node ).
- Document, по историческим причинам часто наследуется HTMLDocument (хотя последняя спецификация этого не навязывает) – это документ в целом. Глобальный объект document принадлежит именно к этому классу. Он служит точкой входа в DOM.
- CharacterData – «абстрактный» класс. Вот, кем он наследуется:
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в
Hello
.
- Comment – класс для комментариев. Они не отображаются, но каждый комментарий становится членом DOM.
- HTMLInputElement – класс для тега ,
- HTMLBodyElement – класс для тега ,
- HTMLAnchorElement – класс для тега ,
- …и т.д.
Также существует множество других тегов со своими собственными классами, которые могут иметь определенные свойства и методы, в то время как некоторые элементы, такие как , и , не имеют каких-либо определенных свойств, поэтому они являются экземплярами класса HTMLElement .
Таким образом, полный набор свойств и методов данного узла является результатом цепочки наследования.
Рассмотрим DOM-объект для тега . Он принадлежит классу HTMLInputElement.
Он получает свойства и методы из (в порядке наследования):
- HTMLInputElement – этот класс предоставляет специфичные для элементов формы свойства,
- HTMLElement – предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
- Element – предоставляет типовые методы элемента,
- Node – предоставляет общие свойства DOM-узлов,
- EventTarget – обеспечивает поддержку событий (поговорим о них дальше),
- …и, наконец, он наследует от Object , поэтому доступны также методы «обычного объекта», такие как hasOwnProperty .
Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство constructor . Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя:
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в