Что такое родительский элемент
Не могу понять, где в HTML дочерние, родительские элементы?
Добрый вечер, вечно вижу в статьях такие термины, как «дочерние» элементы, «родительские» и т.д. Гуглил, гуглил не понимаю все равно. Можете мне пожалуйста разъяснить на основе нижеприведенного HTML кода, заранее благодарю.
Простой 9 комментариев
span дочерний по отношению к div и родительский по отношению к h1
П.С. Вкладывать h1 в span нельзя
Это как обнимашки.
Мама и папа (а иногда дядя Рустем на остановке) обнимают своих детей (как правило). Родители.
div обнимает span. Значит div — родитель span‘у. А span — дочь его, потомок.
span родила внебрачную дочь и назвала её h1, в честь мужа. Брезгливо обнимает.
Для h1, span — родитель. Объятия через страдания.
Выбор родительских элементов с помощью CSS и JQuery
Там были случаи, когда я хотел, чтобы я был в состоянии выбрать родительский элемент с помощью CSS-и я не одинок в этом вопросе. Тем не менее, не существует такого понятия, как Родитель селектор в CSS, так что это просто не представляется возможным до поры до времени.
В этом уроке мы будем ходить через несколько случаев, когда имеющих CSS селектор родительский может пригодиться, наряду с некоторыми возможных путей их устранения. Давайте начнем!
Подождите, Что такое родительский селектор?
Примечание: этот пример чисто псевдокод, она не существует ни предложить наилучший синтаксис!
Случай 1: Стайлинг Наследие Содержание
Мы хотим, чтобы изображения с содержанием унаследованной появляться, как описано выше. Но так как там может быть больше div теги в нашем документе, те, которые не содержат изображения на всех, следующие объявления стилей было бы совершенно непрактичным.
Было бы применить цвет фона, отступы и поля для всех элементов div в содержании. На самом деле мы хотим применить эти стили исключительно div элементы, которые обертка изображения и подписи к изображению.
Случай 2: Поддержание пропорции видео
Другой пример выглядит на поддержание встроенного видео (ссылка с Youtube или Vimeo) соотношение, а также сделать видео жидкость. В эти дни, во многом благодаря исследовательской работы Дэйв Рупертом и приятелями, это широко признано, что лучшим подходом является применение padding-top или padding-bottom к родительскому элементу.
Фрагмент кода от CSS-Tricks: Fluid ширина видео
В реальном мире, однако, мы можем бы не знать, какой элемент содержит видео. Мы можем найти некоторые встроенные видео, завернутые в div или p без имени идентифицируемого класса, что делает его сложно выбрать подходящий элемент, на котором будет применить стили.
Как было бы замечательно, чтобы непосредственно выбрать родительский элемент данного видео!
Случай 3: В ответ на форму ввода
В этом примере у нас есть форма с несколькими входами. Когда мы сосредотачиваемся на одном из входов, она дается более видную цвет границы, выделяя позицию пользователя внутри формы.
Иногда вы также можете столкнуться с ситуацией, когда подсвечивается не только цвет границы, но элемент упаковки вход, что делает ввод еще более заметным:
Форма ввода фокус.
Возможные обходные
Как мы уже рассмотрели, нет такого понятия, как родительский селектор, так что выбор одного из родителей не представляется возможным. Мы могли бы попытаться обойти эту проблему, с помощью полностью пересмотреть конструкцию так, чтобы выбирая родителя избегается. Но если это не представляется возможным, то здесь некоторые потенциальные подходы.
Использование CSS :has() селектор
:has селектор официально называется реляционной псевдо-класса. Он соответствует элементы на основе их потомков, которые определены между круглыми скобками.
Этот селектор разработан для уровня CSS Selector 4 хотя никакие браузеры не реализовать его пока нет. Нам придется подождать немного дольше, прежде чем этот селектор приходит к свету. До тех пор, пока взгляните на следующий курс видео под названием CSS будущего, чтобы узнать, как работает селектор:
Использование Parent селектор JQuery
Ни одно решение CSS не может исправить наши вопросы здесь, так что давайте посмотрим, что JavaScript может сделать для нас вместо этого. В этом примере мы будем использовать JQuery для его надежные API, удобство и совместимость браузера. На момент написания JQuery предоставляет три метода для выбора родительских элементов.
parent(); этот метод выбирает непосредственный вышестоящий целевого элемента. Мы можем использовать этот метод для решения всех наших случаев использования упомянутых ранее в учебнике.
Структура изображения в старой версии контента.
Структура изображения в старой версии контента с дополнительным классом.
parents() обратите внимание на форму множественного числа этого метода. Этот метод позволяет выбрать родительские элементы из немедленного, вплоть до корня документа, если селектор не указан в качестве аргумента.
Класс has-img-caption применяется с parents() метод.
parentsUntil(); этот метод выбирает родительские элементы вплоть до, но не включая элемент, указанный в скобках.
В некоторых случаях, когда вы Gazillion вложенные элементы, используя метод parentsUntil() является предпочтительным. Это сравнительно быстрее, чем parents() метод, как он избегает с помощью селектора двигатель jQuery (Sizzle), чтобы путешествовать по всему DOM дерева до корня документа.
Подведению
Действительно ли мы, скорее всего, чтобы иметь CSS Parent Selector в какой-то момент в будущем?
А еще лучше, изучить структуру HTML, когда это возможно, чтобы увидеть, если выбрать родительский элемент можно полностью избежать!
CSS уроки, 2 часть: CSS родительские элементы, дочерние, псевдоклассы
Родительские и дочерние элементы, псевдоклассы
В предыдущем уроке мы рассмотрели, как с помощью классов (class) и идентификаторов (id) можно ограничивать область действия команды стиля. Теперь посмотрим, какие существуют другие методы для точного управления командами стиля.
Родительские и дочерние элементы
Часто, элементы одной HTML-страницы могут быть включены в другие элементы. Например, в следующем абзаце гиперссылка включена в элемент и в абзац
Посетите следующую интересную страницу!
Внутренний элемент называется дочерним, а внешний — родительским. В этом случае,
Отношения родительский-дочерний особенно полезны для определения области действия команд CSS. Например, с помощью следующей команды вы можете удалить гиперссылки в абзаце с классом menu (некоторые веб-дизайнеры предпочитают этот стиль главному меню):
Преимущество этого подхода заключается в том, что класс указывается только один раз — для абзаца, а не для каждой гиперссылки в отдельности.
Обратите внимание, как сначала указывается имя родительского элемента (возможно, с именем класса или идентификатора), а затем имя дочернего элемента, оставляя пробел.
CSS позволяет использовать другой тип отношения элемента: parent-child. Разница заключается в том, что дочерним элементом может быть только тот элемент, который непосредственно связан с родителем. Например:
является дочерним элементом
Стиль для детей можно указать следующим образом:
Эта команда удалит подчеркивание всех дочерних гиперссылок элемента .
Псевдоклассы
Используя так называемые псевдоклассы, вы можете создавать специальные эффекты для некоторых селекторов. Псевдоклассы обычно назначаются следующим образом:
Давайте посмотрим на некоторые конкретные примеры.
Псевдокласс link
С помощью псевдокласса link вы можете изменить стиль гиперссылок (которые обычно синего цвета и подчеркнуты):
Псевдокласс visited
Псевдокласс visited определяет стиль для уже посещенных гиперссылок:
Псевдокласс hover
Псевдокласс hover используется для указания стиля элемента, на котором расположен указатель мыши. Чаще всего они используются гиперссылками:
Эта команда CSS превратит любую гиперссылку в красную, когда на нее наведен указатель мыши.
Псевдокласс hover может использоваться и для других элементов. Например, раскрывающиеся меню и их производных. Когда указано главное меню, стиль наведения активируется, и в результате отображается подменю. Более ранние версии Internet Explorer поддерживают псевдокласс hover только для гиперссылок, но существуют способы обойти эти ограничения.
Псевдокласс active
Псевдокласс active устанавливает стиль для элементов, по которым щелкают в данный момент. Активный псевдокласс часто используется с гиперссылками:
Если вы используете комбинацию псевдоклассов гиперссылок, при их объявлении вы должны вы должны соблюдать порядок link — visited — hover — active. В противном случае, стиль не будет выполнен.
Псевдокласс first-child
Псевдокласс first-child используется для указания первого дочернего стиля элемента. Например, вы можете создать первый абзац любой страницы курсивным шрифтом, применив псевдокласс first-child к абзацам:
Вот немного более сложный пример выделения первой гиперссылки в каждом абзаце:
Псевдокласс focus
Псевдокласс focus позволяет вам применять стиль к вводу с клавиатуры. Стиль становится активным, когда элемент находится в фокусе. Один общий пример — установить цвет фона (например, розовый) или рамку для поля ввода:
Учебный курс по React, часть 4: родительские и дочерние компоненты
Публикуем очередную часть перевода учебного курса по React. Нашей сегодняшней темой будут взаимоотношения родительских и дочерних компонентов.
Занятие 9. Родительские и дочерние компоненты
В прошлый раз там, где в вышеприведённом коде находится описание элемента
Вот как выглядит этот код:
Тут функция App возвращает единственный элемент, но напомним, что из подобных функций можно возвращать и более сложные структуры. Самое главное — не забывать о том, что возвратить можно лишь один элемент, который, если, на самом деле, вывести нужно несколько элементов, представляет собой контейнер, включающий их в себя. Например, вот как будет выглядеть возврат разметки, описывающей заголовок первого уровня и маркированный список:
Вот как всё это будет выглядеть в браузере.
Приложение в браузере
Тут ещё можно стилизовать список для того, чтобы он стал больше похожим на навигационную панель.
Можно заметить, что код компонента уже стал довольно большим. Это идёт вразрез с целью, ради которой мы используем React. Ранее мы говорили о том, что фрагменты HTML-кода можно представлять в виде отдельных компонентов, а в нашем компоненте всё свалено в одну кучу. Поэтому сейчас мы создадим компоненты для каждого самостоятельного фрагмента разметки.
Взгляните на эту схему для того, чтобы лучше разобраться в том, о чём идёт речь.
, его имя начинается с маленькой буквы, что говорит нам о том, что это — обычный элемент, а не один из созданных нами компонентов. С другой стороны, имя MyInfo начинается с большой буквы. Это помогает понять, что перед нами — компонент.
Компонент App выводит два компонента
Если у нас имеется «подвал» страницы, то она может содержать и «шапку», оформляющую её верхнюю часть.
Компонент App выводит три компонента
По мере рассмотрения этой схемы вы можете заметить, что React-приложение, в ходе его развития, может становиться всё более и более сложным. И то, что мы тут рассмотрели, на самом деле, представляет собой пример крайне простой структуры приложения.
Теперь давайте создадим в нашем учебном приложении компонент, который будет представлять собой «подвал» страницы.
Обратите внимание на то, что имя функционального компонента начинается с большой буквы ( Footer ), а имя элемента ( ) — с маленькой. Как уже было сказано, это помогает отличать элементы от компонентов.
А именно, речь идёт о том, что в коде файла компонента App нужно импортировать компонент Footer и создать его экземпляр. Отредактируем код файла App.js :
Теперь страница, которую формирует приложение, будет выглядеть так, как показано ниже.
Компонент App выводит в нижней части страницы разметку, формируемую другим компонентом — Footer
Здесь мы поговорили о том, как работать с вложенными компонентами. Вы вполне можете попробовать на практике то, что только что узнали, приведя проект, файл App.js которого выглядит так, как показано выше, в рабочее состояние.
Занятие 10. Практикум. Родительские и дочерние компоненты
▍Задание
Создайте React-приложение с нуля. Выведите на страницу корневой компонент App (определённый в отдельном файле). Внутри этого компонента выведите следующие компоненты:
▍Решение
Код файла Header.js :
Код файла MainContent.js :
Код файла Footer.js :
Вот как выглядит проект в VSCode.
А вот как выглядит страница, которую сформировало это приложение.
Страница приложения в браузере
Наше React-приложение работает, но то, что оно выводит на страницу, выглядит как-то совсем неинтересно. Исправить это можно, стилизовав содержимое страницы.
Итоги
Сегодня мы поговорили о родительских и дочерних компонентах. В следующий раз мы начнём работу над нашим первым большим учебным проектом и поговорим о стилизации элементов страницы.
Уважаемые читатели! Если вы занимаетесь по этому курсу — просим рассказать о том, как вы выполняете практические занятия. А именно — пишете ли код, что называется, «из головы», или поглядываете на текст предыдущего занятия? А, может быть, вы пытаетесь найти то, что забыли, в интернете?
Дочерние селекторы
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1).
Пример 12.1. Вложенность элементов в документе
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой (рис. 12.1).
Рис. 12.1. Дерево элементов для примера
На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу
. Вместе с тем тег не является дочерним для тега
Вернёмся теперь к селекторам. Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий.
Селектор 1 > Селектор 2
Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.
Если снова обратиться к примеру 12.1, то стиль вида P > EM < color: red >будет установлен для первого абзаца документа, поскольку тег находится внутри контейнера
, и не даст никакого результата для второго абзаца. А все из-за того, что тег во втором абзаце расположен в контейнере , поэтому нарушается условие вложенности.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора же допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберём следующий код (пример 12.2).
Пример 12.2. Контекстные и дочерние селекторы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 12.2.
Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора
На тег в примере действуют одновременно два правила: контекстный селектор (тег расположен внутри
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 12.3 показано изменение вида списка с помощью стилей. За счёт вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 12.3).
Рис. 12.3. Список в виде меню
Пример 12.3. Использование дочерних селекторов
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.
Вопросы для проверки
1. Какой цвет будет у жирного курсивного текста в коде
Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам.
При использовании следующего стиля?
3. Для какого тега элемент выступает родителем?