Что такое родительский элемент в css

Выбор родительских элементов с помощью 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 позволяет вам применять стиль к вводу с клавиатуры. Стиль становится активным, когда элемент находится в фокусе. Один общий пример — установить цвет фона (например, розовый) или рамку для поля ввода:

Источник

Css выбрать родительский элемент

На этом уроке мы изучим основные виды селекторов, и научимся их использовать на практике.

Что такое CSS селекторы?

Селекторы — это один из фундаментальных механизмов CSS. Именно они определяют то, к каким элементам будут применены стили, указанные в фигурных скобках.

Пример CSS правила:

В CSS очень много различных типов селекторов. Используя один из них или комбинацию из нескольких можно очень точно применить стили к нужным элементам.

Базовые селекторы

К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.

Селектор по элементу (тегу)

Селектор по элементу предназначен для выбора элементов по имени тега.

Пример задания правила для всех элементов p на странице:

Селектор по классу

Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).

Пример задания правила для всех элементов, имеющих класс center :

Селектор по идентификатору (id)

Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).

Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :

Универсальный селектор

Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.

Пример задания правила для всех элементов на странице:

CSS селекторы по атрибуту

Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.

Типы селекторов по атрибуту:

=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.

Пример задания правила для всех элементов на странице, имеющих атрибут target :

[attr=value]

Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow :

[attr^=value]

[attr|=value]

[attr$=value]

[attr*=value]

Псевдоклассы

Псевдоклассы предназначены для более точного выбора элементов в зависимости от их динамического состояния или расположения. С помощью них можно, например, установить стили элементу при поднесении к нему курсора или стилизовать элемент в зависимости от того какой он имеет порядковый номер.

Псевдоклассы для выбора элементов в зависимости от их состояния

Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ).

Псевдокласс :link

Псевдокласс :link предназначен для выбора не посещённых ссылок.

Псевдокласс :visited

Псевдокласс :visited предназначен для выбора посещённых ссылок.

Псевдокласс :active

Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов.

Пример задания CSS правила для всех элементов a когда они активируются пользователем:

Псевдокласс :hover

Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).

Если CSS-правила расположить в другом порядке, то часть из них могут не работать.

Псевдокласс :focus

Предназначен для выбора элемента, который в данный момент находится в фокусе. Например, данное состояние может активироваться когда мы кликаем мышью в текстовое поле или переходим в него с помощью клавиши tab на клавиатуре.

Пример задания CSS правила для элемента input[type=»text»] при нахождении его в фокусе:

По расположению среди соседей

При выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе.

Псевдокласс :first-child

Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.

Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:

Псевдокласс :last-child

Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.

Псевдокласс :only-child

Псевдокласс :only-child используется для выбора элементов, если они являются единственными дочерними элементами внутри родительского контейнера.

Псевдокласс :nth-child(выражение)

Псевдокласс :nth-last-child(выражение)

Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even

По расположению среди соседей с учётом типа элемента

Псевдокласс :first-of-type

Псевдокласс :last-of-type

Данный псевдокласс предназначен для выбора элементов, которые являются последними дочерними элементами данного типа своего родителя.

Псевдокласс :only-of-type

Псевдокласс :only-of-type применяется для выбора элементов, если каждый из них являются единственным дочерним элементом данного типа внутри своего родителя. В отличие от :only-child псведокласс :only-of-type работает аналогично, но с учётом типом элемента.

Псевдокласс :nth-of-type(выражение)

Данный псевдокласс предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа.

Псевдокласс :nth-last-of-type(выражение)

Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.

Псевдоклассы для элементов форм

Псевдокласс :checked

Псевдокласс :enabled

Псевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст.

Пример, в котором установим для всех включенных элементов input фон:

Псевдокласс :disabled

Элементы формы могут кроме включенного состояния находиться ещё в отключенном.

Псевдокласс :disabled предназначен для выбора отключенных элементов формы, т.е. элементов с которыми пользователь в данный момент не может взаимодействовать.

Например, выберем все отключенные элементы input :

Остальные псевдоклассы

Псевдокласс :not(селектор)

Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.

Пример CSS селектора для выбора элементов, которые не содержат некоторый класс:

Псевдокласс :empty

Псевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых).

Селектор div:empty выберет все пустые элементы div на странице.

Псевдокласс :root

Применять :root можно например для объявления CSS переменных:

Псевдокласс :target

Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.

Группировка селекторов

Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

Пример задания правила для всех элементов h3 и h4 на странице:

Комбинирование селекторов

В CSS селекторы можно комбинировать. Осуществляется это очень просто, посредством последовательного их записывания, без использования пробела.

Пример селектора для выбора элементов, которые имеют одновременно два класса:

Пример селектора для выбора элементов, которые имеют указанный класс, атрибут, и является первым дочерним элементом в своём родителе:

Селекторы отношений

В HTML документе каждый элемент всегда связан с другими элементами.

Виды отношений между HTML элементами:

Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.

В CSS имеется 4 вида селекторов отношений.

Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.

Остальные два X + Y и X

Y являются CSS селекторами для выбора соседних элементов.

Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и

Селектор X Y (для выбора вложенных или дочерних элементов)

Селекторы X Y называют контекстными или вложенными.

Селектор X > Y

Селектор X + Y

Селектор X

Приоритет селекторов

Когда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес).

При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.

Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.

Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:

Каких селекторов нет в CSS?

В CSS нет селектора для получения родительского элемента. Этот селектор может появиться в новой спецификации CSS, но в CSS3 так выбрать элемент нельзя.

Здравствуйте.
Вот, например, есть код

Как выбрать элемент
, который является прямым родителем элемента привязки?

В примере мой CSS будет примерно таким:

Очевидно есть способы сделать это с помощью JavaScript, но я надеюсь, что существует какое-то обходное решение, существующее на уровне CSS 2-го уровня.

Меню, которое я пытаюсь создать, извергает CMS поэтому я не могу переместить активный элемент в элемент
. (если я не использую модуль создания меню, который я бы предпочел не делать).

27 ответов

В настоящее время нет способа выбрать родительский элемент элемента в CSS.

Если бы был способ сделать это, это было бы в любой из текущих спецификаций селекторов CSS:

Тем временем, вам придется прибегнуть к JavaScript, если вам нужно выбрать родительский элемент.

Как уже упоминалось в парах других, нет способа стилизовать родительский элемент элемента, используя только CSS, но следующее работает с jQuery :

или более короткий путь, если вы используете jQuery в своем приложении:

Вы можете попытаться использовать гиперссылку в качестве родителя, а затем изменить внутренние элементы при наведении. Например:

Таким образом вы можете изменить стиль во множестве внутренних тегов на основе опрокидывания родительского элемента.

Селектор CSS « General Sibling Combinator » может быть использован для того, что вы хотите:

Я знаю, что OP искал решение для CSS, но его легко достичь с помощью jQuery. В моем случае мне нужно было найти родительский тег

По крайней мере, вплоть до CSS3, включая CSS3, вы не можете выбрать это. Но это может быть сделано довольно легко в настоящее время в JS, вам просто нужно добавить немного ванильного JavaScript, обратите внимание, что код довольно короткий.

Это наиболее обсуждаемый аспект спецификации Selectors Level 4. С помощью этого селектора вы сможете стилизовать элемент в соответствии с его дочерним элементом, используя восклицательный знак после данного селектора (!).

установит красный цвет фона, если пользователь наводится на любой якорь.

Но нам нужно ждать реализации браузеров: (

В css3 добавлен новый селектор, поэтому, если html выглядит так:

Фактически вы можете воздействовать на родителя элемента «a», который является «li» «

Нет, вы не можете выбрать родителя только в css.

Я не думаю, что вы можете выбрать родителя только в css.

Вот взломать с помощью pointer-events с hover :

Насколько мне известно, не в CSS 2. CSS 3 имеет более надежные селектор, но не всегда реализуется во всех браузерах. Даже с улучшенными селекторами я не верю, что он выполнит именно то, что вы указали в своем примере.

Одна из вещей, которые добавляет EQCSS, является родительским селектором. Он работает во всех браузерах IE8 и выше. Вот формат:

Это позволит выбрать любого родителя текстового ввода. Но подождите, еще многое. Если вы хотите, вы можете выбрать указанного родителя:

или выбрать его, когда он активен:

Посмотрите этот HTML:

Есть еще много возможностей; просто проверьте документацию плагина.

Источник