Html - почему эти селекторы css nth-child не работают должным образом?

Допустимые значения псевдокласса

Значение, указываемое в скобках, означает номера элементов, которым будет присвоен определенный стиль, и может быть задан одним из следующих способов:

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

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

Обратиться к нечетным элементам можно как значением – , так и с помощью формулы . Точно так же можно заменить формулой (каждый второй).

На примере мы сделали таблицу, где для четных элементов установили голубой фон для строк, а для нечетных – светло-зеленый.

See the Pen
nth-child by Андрей (@adlibi)
on CodePen.

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

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

или

А вот цепочка из трех псевдоклассов:

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

Выражение an + b

Альтернативой использованию ключевого слова odd является использование выражения 2n+1. Но как это работает?

Когда выражение в формате an+b содержит отличные от ноля значения a и b, дочерние элементы разбиваются на группы. Если это выражение 2n+1, дочерние элементы разбиваются на группы по два. Каждому элементу в группе присваивается индекс, начиная с 1. Соответствующий элемент в каждой группе — это индекс номер b. В нашем примере это будет первый элемент.

Если выражение 3n+2, элементы группируются по три элемента, и второй элемент в каждой группе соответствует выражению.

Если значение b является отрицательным, соответствующим в группе является элемент с индексом b. Но отсчитывается он в обратном направлении от индекса 1. В этом случае соответствующий элемент будет принадлежать не данной, а предшествующей группе.

Ключевое слово even в nth child CSS может быть выражено как 2n. В этом случае у нас нет значения b, поэтому выбирается каждый элемент группы с индексом a; 2n выбирает каждый второй элемент, 3n — каждый третий, 4n — каждый четвертый и так далее.

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

Мне больше нравится концепция поиска каждого n-ного элемента — каждого 2-го, 3-го или 4-го и т.д. А потом мне проще представить, что вторая часть выражения — это смещение.

В случае 2n+1 я читаю это выражение следующим образом: «Найти каждый второй элемент и переместить выделение вниз на 1».

Если выражение 3n-5, оно будет читаться так: «Найти каждый третий элемент и переместить выделение вверх на 5».

Выбор последнего элемента

Существует также псевдокласс last-child, который работает аналогично селектору CSS first-child, но начинает счет элементов с конца контейнера.

Потестил эту муть немного, инфу поискал. Вот что вышло…

Короче :last-of-type как и :nth-last-of-type работают исправно и аналогично-противоположно(аля словоблуд) как и :first-of-type ,просто есть одна важная особенность.

Вот тут можно поиграть с этим явлением: http://jsfiddle.net/a5r3jut3/ .

Короткое и ясное правило для использования этого псевдо класса: (путь к последнему такому дочерному тегу родителя):last-of-type

Дальше примеры: .

http://jsfiddle.net/djvgaw57/ Класс box выставлен в трех тегах и стиль применится к последнему тегу из всей трехэлементной последовательности тегов . .
http://jsfiddle.net/mkj7fatu/ Класс box у двух последовательностей — выбирается последний тег в каждой последовательности

.
http://jsfiddle.net/jbffqkLh/ Оказывается даже не важно какие классы будут у тегов, которые находятся в последовательности, и которые не являются последним тегом в последовательности. Важен класс только последнего тега в последовательности

.
http://jsfiddle.net/fn4s14gn/ При изменении класса последнего тега в последовательности — стили не накладываются на последний тег, и собсно все. .
http://jsfiddle.net/9fjppk95/ Но если такой класс присутствует в последнем теге последовательности таких же тегов — стили накладываются и все работает. .
http://jsfiddle.net/56kqvyzg/ Всегда ведь можно импровизировать. .
http://jsfiddle.net/zn3mq0mo/ Вот это самая интересная! Класс box у тега и ,

Все ‘ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный этого родителя;
Все ‘ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный этого родителя; .

Еще раз перечитай правило и зырь сюда http://jsfiddle.net/515pg3j2/ , сечешь? Только последний дочерный тег родителя из всех таких же дочерный тегов этого же родителя. .
Ну и на финал http://jsfiddle.net/nag633rc/

Вроде формулировку использовал правильную, делал пост и пытался понять 3 часа. Даже если что то не сказал, это можно понять по выложеным примерам.

Слово “Последовательность” использовалось для замены формулировки “Последовательность дочерных одинаковых тегов в общем родителе”

:nth-of-type

Что меня часто не удовлетворяет, так это то, что псевдокласс nth child CSS отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.

<section> 
  <h1>lorem ipsum;</h1> 
  <p>Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;</p> 
  <p>Nunc sed turpis. Donec posuere vulputate arcu;</p> 
</section>

Есть раздел с заголовком, подзаголовком и несколькими абзацами. Я хочу, чтобы первый абзац немного выделялся с помощью увеличенного размера шрифта 1.5em.

Можно попробовать применить код section p:first-child, так как нужно задать дополнительный стиль для первого абзаца в этом разделе. Но это не сработает, поскольку первый дочерний элемент раздела — h1. В этом случае необходимо использовать селектор :first of type CSS.

Существует целый ряд селекторов этого типа — :first-of-type, :last-of-type, :nth of type и :nth-last-of-type. Они ведут себя так же, как :nth-child, но отбирают n-ые экземпляры элементов определенного типа.

Эти селекторы довольно сложны, но они предоставляют большие возможности. Они поддерживаются всеми браузерами, начиная с IE9, в IE8 поддерживается только :first child CSS. В прошлом они не раз помогли мне решить несколько сложных задач.

Вадим Дворниковавтор-переводчик статьи «AtoZ CSS Screencast: nth-child and nth-of-type»

Селекторы класса

Селектор класса начинается с символа точки (). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем , и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

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

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

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

В примере ниже у нас есть , содержащий примечание. Серая граница применяется когда блок имеет класс . Если у блока есть также класс или , мы меняем (en-US).

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему не применён ни один стиль, так как он имеет только класс ; ему нужен ещё и класс , чтобы получить какую-нибудь стилизацию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

– по имени атрибута;
– по имени и значению атрибута;
– по имени и значению, с которого оно должно начинаться;
– по имени атрибута и его значению, которое равно value или начинается со value- ;
– по имени атрибута и значению, на которое оно должно заканчиваться;
– по указанному атрибуту и значению, которое должно содержать value ;
[attr

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

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

Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):

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

Пример задания правила для всех элементов на странице, имеющих атрибут href , значение которого содержит подстроку youtu.be (например будет выбран элемент, если атрибут href у него равен https://www.youtube.com/watch?v=TEOSuiNfUMA ):

Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):

27 ответов

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

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

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

Рабочий блок для выбора уровня 4 включает псевдокласс класса :has() , который работает аналогично реализации jQuery . По состоянию на 2018 год это все равно не поддерживается никаким браузером .

Используя :has() , исходный вопрос можно было бы решить с помощью этого:

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

Короткий ответ НЕТ, у нас на этом этапе в CSS нет parent selector , но если вы все равно не хотите менять элементы или классы, второй вариант использует JavaScript, что-то вроде этого:

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

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

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

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

Это соответствует любому элементу F , которому предшествует E ].

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

для тега , содержащегося в дочернем . В jQuery есть селектор :has , поэтому можно определить родителя с помощью его дочерних элементов:

выберет элемент ul , у которого есть дочерний элемент с id someId . Или, чтобы ответить на исходный вопрос, что-то вроде следующего должно сделать трюк (непроверенный):

По крайней мере, вплоть до CSS3, включая CSS3, вы не можете выбрать это

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

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

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

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

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

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

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

Но поскольку у вас уже есть класс .active , не было бы легче перенести этот класс на li (вместо этого из a )? Таким образом, вы можете получить доступ только к li и a только через css.

Попробуйте переключить отображение a на block , а затем используйте любой желаемый стиль. Элемент a заполнит элемент li , и вы сможете изменить его внешний вид по своему желанию. Не забудьте установить li дополнение на 0.

Кто-нибудь предложил что-то подобное? Просто идея для горизонтального меню .

Другой пример , как использовать его с текстовыми вводами – выберите родительский набор полей

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

Но поскольку у вас уже есть класс .active , не было бы легче перенести этот класс на li (вместо a )? Таким образом, вы можете получить доступ только к li и a только через css.

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

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

Существует плагин, который расширяет CSS, чтобы включить некоторые нестандартные функции, которые действительно могут помочь при разработке веб-сайтов. Он называется EQCSS .

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

Итак, здесь мы открыли запрос элемента для каждого элемента a.active , а для стилей внутри этого запроса такие вещи, как $parent , имеют смысл, потому что есть контрольная точка , Браузер может найти родителя, потому что он очень похож на parentNode в JavaScript.

EQCSS также включает в себя метаселектора $prev для элемента перед выбранным элементом, $this только для тех элементов, которые соответствуют запросу элемента, и многое другое.

Вы можете использовать этот скрипт .

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

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

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

вы можете выбрать span.help , когда активен input и показать его:

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

Бах — Алла Бреве

Проблема заключается в этом CSS и HTML. Вот ссылка на jsFiddle с примером кода.

HTML

CSS

Ни одна из этих строк CSS не должна нацеливаться на последний элемент li с «полным» классом?

Этот запрос в jQuery также не нацелен на него:

Но вот этот:

@PatrickEvans Что ты имеешь в виду? api.jquery.com/category/selectors или, точнее, api.jquery.com/last-child-selector

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

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

Чтобы ответить на ваш вопрос, приведенный ниже стиль последнего ребенка элемент с красным цветом фона.

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

Это сработало бы, если бы (и только если) последний в вашей разметке также было .

Селектор работает в скрипке, потому что он (то есть элемент с ) по-прежнему является первым элементом типа внутри родителя. Попробуй добавить как первый элемент под и вы обнаружите, что тоже шлепает. Это потому, что а также селекторы выбирают первый / последний элемент каждого типа под родительским.

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

4 Это так глупо, но я думаю, ты прав. Надеюсь, они добавят это в спецификацию CSS4.
@NejKutcharian: Да, я думаю, что это предложение уже давно.
@Harry Я нахожу довольно странным, что: .complete: last-of-type не работает, но .complete: first-of-type действительно работает, независимо от его положения родительского элемента. Спасибо за вашу помощь.
@NejKutcharian: Хорошо, понятно. работает в скрипке, потому что это все еще первый элемент типа внутри родителя. Попробуй добавить как первый элемент под и вы обнаружите, что тоже шлепает.

CSS-псевдоклассы

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

Примерами псевдоклассов являются «первая строка в контейнере», «первая буква в слове», «первый дочерний элемент у родителя». Браузер может обнаружить подобные элементы только после того, как он проанализировал страницу и составил DOM-дерево, а в ряде случаев только после отрисовки.

Наличие в CSS подобного механизма позволяет определять оформление, не привязанное к HTML-коду, что открывает большие возможности для дизайна.

: last-child не будет работать, если элемент не является ОЧЕНЬ ПОСЛЕДНИМ элементом

В дополнение к ответу Гарри я думаю, что важно добавить / подчеркнуть, что: last-child не будет работать, если элемент не является ОЧЕНЬ ПОСЛЕДНИМ элементом в контейнере. По какой-то причине мне потребовались часы, чтобы осознать это, и хотя Гарри дал очень подробный ответ, я не смог извлечь эту информацию из «Селектор last-child используется для выбора последнего дочернего элемента родителя»

Предположим, это мой селектор:

Это работает:

Это не так:

Это не потому, что element — не последний элемент внутри своего родителя.

Это может быть очевидно, но это было не для меня …

8 Двойник! Кроме того, nth-last-child работает так же. Вместо этого используйте последний тип.
1 Большое спасибо за эту информацию, она помогла мне понять, почему мой CSS не работает. Я уверен, что приверженцы будут утверждать, что это правильно, но я уверен, что хочу, чтобы псевокласс был последним дочерним элементом изменяемого селектора, а не работал только с последним дочерним элементом всего списка узлов.
Это мне помогло. У меня было три метки и @ Html.ValidationMessageFor для ввода, а последним дочерним элементом было ValidationMessage …

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

я использую чтобы добиться этого.

Для меня это странно, потому что nth-last-child элемента может быть вторым из последнего элемента, но он работает, и я получил ожидаемый результат. Я нашел этот полезный трюк от CSS Trick

Селекторы ID

Селектор ID начинается с , а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один . Можно выбрать элемент, которому присвоен , а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

Предупреждение: Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

CSS-псевдоклассы

:nth-child

Псевдокласс :nth-child позволяет выбирать элементы по порядку их следования в коде.
Например, можно выбрать все четные строки таблицы и сделать ее полосатой.

Возьмем обычный список, зададим симпатичные стили его элементам и отдельно раскрасим 5ый элемент:

See the Pen aboqOvL by Websitio (@Websitio) on CodePen.

Таким образом можно выбрать несколько элементов, 5ый и 7ой:

See the Pen wvwyaGw by Websitio (@Websitio) on CodePen.

Переменная n

В общем виде значение задаётся с помощью математического выражения an+b, где a и b это целые числа, а n последовательность целых чисел от 0 и до бесконечности (0, 1, 2, 3 ….). Если браузер находит элемент с вычисленным порядковым номером, то применяет кнему указанные стили.

Рассмотрим на примере.
При n=0 получаем 2х0=0. Нулевых элементов нет — ничего не покрасится.
При n=1 2х1=2. Стили применятся ко второму по порядку элементу.
При n=2 2х2=4. Стили применятся к четвертому элементу.
И т.д.

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

Для чётных элементов существует также специальное ключевое слово.

Аналогично для нечетных чисел есть специальное слово или запись через счетчик n

n=0 получаем 2х0+1=1. 1ый элемент.
n=1 2х1+1=3. 3ий элемент.
n=2 2х2+1=5. 5ый элемент.

В примере ниже одновременно применены odd и even.

See the Pen vYBdOxb by Websitio (@Websitio) on CodePen.

Более сложные выражения

— стили применятся к каждому 5му элементу начиная с 4го

See the Pen LYPQVLB by Websitio (@Websitio) on CodePen.

Выделить все элементы кроме нескольких начальных

Если в формуле an+b задать b как большое положительное число, то элементы с номером меньше b не будут покрашены, а всеостальные, начиная с номера b — будут

See the Pen rNBJVGG by Websitio (@Websitio) on CodePen.

Отрицательный n

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

See the Pen ZEzrGay by Websitio (@Websitio) on CodePen.

Комбинирование выражений в :nth-child

Можно применять последовательно несколько

Первая часть выражения выделит элементы с 3го до бесконечности, вторая до 13го.
Стили применяться к элементам на пересечении этих двух множеств: от 3 до 13. Всего будут выделены 11 элементов.

See the Pen WNeMvMx by Websitio (@Websitio) on CodePen.

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

See the Pen qBWxdKJ by Websitio (@Websitio) on CodePen.

Или не будем писать плохой код и переопределять цвета, а зададим 2 отдельных правила:

See the Pen eYOVNje by Websitio (@Websitio) on CodePen.

Особенность :nth-child

ищет лишь те элементы, которые соответствуют типу селектора, к которому применены

Пусть в теге есть дочерние элементы и

Запись сработает только для тегов strong. Соответствующие номера попадающие на тег будут пропущены

Обратите внимание, элемент номер 8 является первым, т.е. нечетным strong’ом, но четным элементом в наборе

И к нему будет применен фон, потому что расчет идет среди всех элементов набора.

Выбор последнего элемента

Потестил эту муть немного, инфу поискал. Вот что вышло…

Вот тут можно поиграть с этим явлением: http://jsfiddle.net/a5r3jut3/ .

http://jsfiddle.net/djvgaw57/ Класс box выставлен в трех тегах

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

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

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

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

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

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

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

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

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

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

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

Селектор X Y (предок потомки) предназначен для выбора элементов Y , находящихся в X .

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

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

Например, селектор дочерних элементов div p выберет все элементы p , расположенные в div .

Селектор X > Y

Селектор X > Y (родитель > дети) предназначен для выбора элементов, определяемым селектором Y непосредственно расположенных в элементе, определяемым селектором X .

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

Например, комбинация селекторов li > ul выберет все элементы ul , которые непосредственно расположены в li .

Селектор X + Y

Селектор X + Y предназначен для выбора элементов Y , каждый из которых расположен сразу же после X . Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).

Например, комбинация селекторов input + label выберет все элементы label , которые расположены сразу же за элементом input , и являющиеся друг по отношению к другу соседями (сиблингами).

Селектор X

Y предназначен для выбора элементов Y , которые расположены после X . При этом элементы, определяемые селектором X и Y , должны являться по отношению друг к другу соседями (сиблингами).

span выберет все элементы span , расположенные после элемента p на том же уровне вложенности.