Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

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

Относительные селекторы

.

Относительные селекторы

Относительные селекторы позволяют выбирать элементы в зависимости от их положения по отношению к другим элементам разметки. Все они полностью поддерживаются в IE7+, Firefox, Opera и WebKit:

Селектор потомка (ЕF)

Вы определенно знакомы с этим видом селекторов. Вложенный селектор указывает на любой элемент F, который происходит от элемента Е (потомок, потомок потомка и т. д.). Например, ol 1 і выберет на странице все элементы li, находящиеся внутри нумерованных списков. Однако в числе прочих это будут также и элементы 1 і в ненумерованных списках, помещенные внутрь нумерованных — а это вряд ли то, чего вы хотите.

Селектор дочернего элемента (Е > F)

Этот селектор адресуется к любым элементам F, являющимся прямым потомком элемента Е, все прочие наследники будут проигнорированы. Возвращаясь к приведенному выше примеру, ol > li позволит выбрать все элементы в нумерованных списках, при этом другие элементы выбраны не будут.

Селектор сестринского элемента (Е + F)

Этот селектор таргетирует любой элемент F, имеющий того же самого предка, что и Е, и следующего следом за Е в разметке. Например, li + li выделит все в данном контейнере.

Селектор обобщенных родственных элементов (Е ~ F)

Тут немного хитрее. Этот селектор выбирает любой элемент F, имеющий того же предка, что и Е, и следующий после него в разметке. Т.е. hl~h2 выберет все h2 следующие за hi, пока у них есть общий предок — т.е. пока h2 не относится к другому элементу. Вот пример:

Относительные селекторы

Селектор hl~h2 выберет первый элемент h2, поскольку они оба прямые потомки элемента header. А вот второй элемент h2 выбран не будет, поскольку он — потомок элемента article, а не header. Это соответствовало бы селектору header~h2. Аналогично, h2~p соответствует только последнему абзацу, поскольку первый абзац предшествует элементу h2, с которым у него общий предок (article).

Просматривая таблицу стилей для HTML5 Herald, вы увидите множество примеров использования этих селекторов. Например, описывая общую разметку сайта, мы задаем для трех колонок свойство float:left. Чтобы этот стиль не применялся к div’aM, вложенным в них, мы используем селектор дочернего элемента:

Относительные селекторы

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


.

Читайте так же:
Not found