Соседние CSS селекторы, универсальный селектор и их применение. Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега Css соседние элементы
Влад Мержевич
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.
Lorem ipsum dolor sit amet.
В этом примере тег является дочерним по отношению к тегу
Поскольку он находится внутри этого контейнера. Соответственно
Выступает в качестве родителя .
Lorem ipsum dolor sit amet.
Здесь теги
и
никак не перекрываются и представляют собой соседние элементы. То, что они расположены
внутри контейнера Никак не влияет на их
отношение. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Соседними здесь являются теги и , а также и . При этом и к соседним элементам не относятся из-за того, что между ними расположен контейнер .
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.
Селектор 1 + Селектор 2 { Описание правил стиля }
Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.
В примере 11.1 показана структура взаимодействия тегов между собой.
Пример 11.1. Использование соседних селекторов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Результат примера показан на рис. 11.1.
Рис. 11.1. Выделение текста цветом при помощи соседних селекторов
В данном примере происходит изменение цвета текста для содержимого контейнера , когда он располагается сразу после контейнера . В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег , но по соседству никакого тега нет, так что стиль к этому контейнеру не применяется.
Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путём и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовём его sic , и станем применять его к тегу
. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 11.2). Вид остальных абзацев останется неизменным.
Пример 11.2. Изменение стиля абзаца
HTML5 CSS 2.1 IE Cr Op Sa Fx
Методы ловли льва в пустыне
Метод последовательного перебора
Пусть лев имеет габаритные размеры L x W x H, где L - длина льва от кончика носа до кисточки хвоста, W - ширина льва, а H - его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2L x 2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.
Важное замечание
Для упрощения расчетов хвост в качестве погрешности измерения можно отбросить и не принимать во внимание.
Результат данного примера показан на рис. 11.2.
Рис. 11.2. Изменение вида абзаца за счёт использования соседних селекторов
В данном примере текст отформатирован с применением абзацев (тег
), но запись H2.sic + P устанавливает стиль только для первого абзаца идущего после тега
, у которого добавлен класс с именем sic .
Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги
и
,
то расстояние между ними легко регулировать как раз с помощью соседних селекторов.
Аналогично дело обстоит и для идущих подряд тегов
и
и
А также в других подобных случаях. В примере 11.3 таким манером изменяется величина отступов между указанными тегами.
Пример 11.3. Отступы между заголовками и текстом
HTML5 CSS 2.1 IE Cr Op Sa Fx
Заголовок 1
Заголовок 2
Абзац!
Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счёт включения отрицательного значения у свойства margin-top . При этом текст поднимается вверх, ближе к предыдущему элементу.
Вопросы для проверки
1. Какие теги в данном коде являются соседними?
Формула серной кислоты:H2 SO4
И
- и
- и
- и
- и
2. Имеется следующий код HTML :
Великая теорема Ферма
X n + Y n
= Z n
где n - целое число > 2
Какой текст выделится красным цветом с помощью стиля SUP + SUP { color: red; } ?
- Вторая «n»
- Вторая и третья «n».
Селектор соседнего элемента выбирает элемент, расположенный в коде документа непосредственно за другим заданным элементом. Давайте для примера возьмём кусок html-кода.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут три тега:
, и . Теги и вложены в контейнер
Они являются дочерними по отношению к нему. Но по отношению друг к другу они являются соседними.
Синтаксис соседнего селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента. Давайте работу соседнего селектора:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый элементы, ещё наклонный.
В примере видно, что селектор соседнего элемента сработал в первом абзеце. Тут теги и идут друг за другом. А во втором абзаце между ними использован тег , теперь тут две другие соседние пары тегов: + и + .
Ошибкой в данном случае будет считать тег соседним по отношению к тегу
Тут тег является дочерним по отношению к тегу
А он, в свою очередь, является родителем .
Пример ниже не сработает:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый элементы, ещё наклонный.
Более реальный пример
Давайте рассмотрим работу соседнего селектора на более реальном примере. В больших статьях, содержащих несколько разделов обозначенных тегами
, желательно увеличить верхний отступ (свойство margin-top
). Отступ в 30px будет придавать тексту читабельности. Но вот в случае, если тег
идёт сразу после
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
Вот html-код с примером работы селектора соседнего элемента.
Привет!
Заголовок h2
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Также используя инструмент соседнего селектора удобно регулировать отступ между заголовком и первым абзацем раздела, в нашем примере это теги
и
Также стоит отметить что для уменьшения отступов удобно использовать отрицательные значения.
Соседний селектор в CSS
Привет!
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Теперь пример того, как при помощи соседнего селектора выделить все элементы списка, кроме первого.
Соседний селектор в CSS
- Пункт списка №1.
- Пункт списка №2.
- Пункт списка №3.
- Пункт списка №4.
Вот что получится в результате работы этого примера:
Рисунок 1. Работа примера №5.
Не так давно вышла новая, восьмая версия браузера Internet Explorer, и все веб-мастера вздохнули с облегчением. Ведь наконец-то браузер от Microsoft, пусть и с огромным опозданием, начал более-менее уважительно относиться к спецификациям HTML и CSS и адекватно отображать веб-страницы. В общем-то, все ожидали этого еще от седьмой версии. Однако она, на первый взгляд, не принесла ничего нового, кроме поддержки использования вкладок. Но это только на первый взгляд… Мало кто знает еще об одном весьма значительном нововведении в IE7: именно в этой версии данный браузер впервые начал поддерживать новые виды CSS-селекторов.
Селектор - часть CSS-правила, которая указывает, к каким элементам его применять. Основные их виды известны практически всем веб-мастерам. Но не так уж много людей слышали про такую «экзотику», как соседние и дочерние селекторы, а также селекторы атрибутов. Это объясняется тем, что в их использовании долго не было никакого смысла, ведь один из самых популярных браузеров Internet Explorer не обеспечивал их поддержку. Однако сейчас ситуация поменялась, и открывшиеся новые возможности было бы не очень разумным оставлять в стороне. Именно поэтому я и решил написать этот небольшой обзор.
Соседние селекторы
Указывают, что CSS-правило применяется к элементу только тогда, когда он является соседним по отношению к какому-либо другому элементу. Пример:
Элементы называются соседними, когда в коде страницы они , и между ними нет никаких других элементов
Здесь соседними являются теги и , а также и . Теги и соседними не являются, поскольку между ними «вклинился» посторонний элемент .
Синтаксис записи соседнего селектора следующий:
I элемент + II элемент {…}
Давайте составим такое правило для нашего примера:
strong + em { color: red; }
strong + ins { color: blue; }
Вот как будет выглядеть результат:
Как видишь, стиль изменился только для тега , а тег не был затронут. Это очень хорошо иллюстрирует правило соседнего расположения.
Проведем еще один эксперимент - заменим в нашем примере на :
Элементы называются соседними, когда в коде страницы они расположены рядом друг с другом, и между ними нет никаких других элементов
Как нетрудно догадаться, стиль второго из тегов не изменится:
Это происходит потому, что он уже не будет являться соседним для .
Дочерние селекторы
Указывают, что CSS-правило применяется к элементу только тогда, когда он является дочерним по отношению к какому-либо другому элементу. Пример:
Элемент называется дочерним по отношению к тому элементу, в который он вложен, если он является непосредственным потомком этого элемента
Здесь дочерними являются тег по отношению к тегу А также по отношению к . Тег по отношению к тегу Дочерним не является, поскольку тот не является его непосредственным родителем.
Синтаксис записи следующий:
I элемент > II элемент { … }
Дочерние селекторы очень сильно похожи на известные всем контекстные, с той лишь разницей, что для контекстных селекторов глубина вложенности элементов не имеет значения. Для дочерних же глубина вложенности не может быть больше одного уровня. Проиллюстрируем все это, составив несколько правил для нашего примера:
p >
p > em {color: blue; } /* Дочерний селектор */
Мы получим следующий результат:
В нашем случае тег не является дочерним для Поскольку находится на втором уровне вложенности в него. Естественно, что стиль, который должен сделать текст синим цветом, для него не «сработал».
Теперь заменим дочерний селектор на контекстный:
p > strong { color: red; } /* Дочерний селектор */
p em {color: blue; } /* Контекстный селектор */
Результат предсказуем:
В отличие от дочернего, контекстный селектор в данном случае «сработал», поскольку для него не важна глубина уровня вложенности.
Селекторы атрибутов
Указывают, что CSS-правило применяется только к тем элементам, которые содержат указанный в селекторе атрибут. Пример:
CSS - очень важная технология, без использования которой невозможно создать хоть сколько-нибудь приличный сайт
Основными понятиями CSS являются стилевые правила, селекторы, свойства и их значения.
Здесь только первый абзац имеет определенный самостоятельно параметр (или атрибут, что одно и то же) align. Следовательно, CSS-правило для селектора атрибута align будет применяться именно к первому абзацу, и только к нему.
Синтаксис записи селектора атрибута:
[атрибут] { … }
Составим правило для нашего примера (для наглядности укажем в дополнение к атрибуту еще и сам тег, для которого его следует рассматривать):
p { color: green; font-weight: bold; }
Нетрудно догадаться, что получится в итоге:
До сих пор я описывал так называемый простой селектор атрибута. Для него важно только само наличие атрибута у тега, но совершенно не важно его значение. Между тем, существуют и другие виды селекторов атрибутов. Давайте вкратце их рассмотрим:
[атрибут=”значение”] { … }
Применяется только к тем элементам, которые имеют указанное значение данного атрибута.
[атрибут^=”значение”] { … }
Почти то же самое, только в этом случае атрибут должен лишь начинаться с указанного значения, а не обязательно содержать его целиком.
[атрибут$=”значение”] { … }
Аналогично, с той разницей, что здесь атрибут должен заканчиваться указанным значением.
[атрибут*=”значение”] { … }
Такая запись показывает, что значение может встречаться в любом месте атрибута.
Как видишь, соседние, дочерние и селекторы атрибутов дают нам много новых возможностей для написания эффективного CSS-кода. Можно придумать огромное количество примеров, в которых их использование будет предпочтительнее, чем «традиционных» всем известных селекторов. Поэтому я думаю, будет разумным взять эти приемы на вооружение. А как их применять, решать только тебе.
Автор статьи: Алексей Антонов, создатель и администратор блога о веб-технологиях www.lounwolf.ru
=====================================================================
Добрый вечер уважаемые коллеги, сегодня мы изучим с Вами два дополнительных селектора
, которые
называются дочерними и соседними селекторами css
. В большей степени можно обойтись и без них, однако,
для вашего развития их нужно усвоить, и иногда применять, чтобы они оставались в вашей памяти. Поэтому обсудим, какие селекторы
являются
соседними, а какие дочерними и разберем на примере.
Дочерние селекторы css
- элементы, которые располагаются внутри родительского элемента. Пример этому может быть следующим.
Мы имеем блок, в котором находится параграф, еще один блок и картинка. Вот эти три элемента и являются дочерними. Если в дочернем блоке также находятся
другие элементы, то они уже не являются дочерними у первого блока, а являются дочерними у блока, в котором непосредственно находятся. Надеюсь, суть
Вы уловили.
Соседние селекторы CSS
- элементы располагающиеся друг за другом в коде документа. Пример этому такой. Мы имеет параграф и
следующий за ним тег span
. Все довольно ясно, а нам лишь осталось разобрать все это на реальных примерах.
Текст в абзаце
Текст в span
Уже не дочерний текст в абзаце
При помощи стилей добавим одинаковый результат для тега span
Div >
span {
font-size
: 200%;
}
p +
span {
color
: red;
}
Результат выполнения кода в обоих случаях будет применяться к тегу span
, т.к., он является дочерним по отношению к тегу div
и
следующим после тега p
. Поэтому шрифт стал в два раза больше и красного цвета. Теперь мы с Вами полностью разобрались с
дочерними и соседними селекторами в CSS
, а Вам остается лишь укреплять свои знания на практике, до скорого!
strong + ins { color: blue; }
А также по отношению к . Тег по отношению к тегу Дочерним не является, поскольку тот не является его непосредственным родителем. Синтаксис записи следующий: I элемент > II элемент { … }
Дочерние селекторы очень сильно похожи на известные всем контекстные, с той лишь разницей, что для контекстных селекторов глубина вложенности элементов не имеет значения. Для дочерних же глубина вложенности не может быть больше одного уровня. Проиллюстрируем все это, составив несколько правил для нашего примера: p > Мы получим следующий результат: В нашем случае тег не является дочерним для Поскольку находится на втором уровне вложенности в него. Естественно, что стиль, который должен сделать текст синим цветом, для него не «сработал». Теперь заменим дочерний селектор на контекстный: p > strong { color: red; } /* Дочерний селектор */ Результат предсказуем: В отличие от дочернего, контекстный селектор в данном случае «сработал», поскольку для него не важна глубина уровня вложенности. Селекторы атрибутов
Указывают, что CSS-правило применяется только к тем элементам, которые содержат указанный в селекторе атрибут. Пример: CSS - очень важная технология, без использования которой невозможно создать хоть сколько-нибудь приличный сайт Основными понятиями CSS являются стилевые правила, селекторы, свойства и их значения. Здесь только первый абзац имеет определенный самостоятельно параметр (или атрибут, что одно и то же) align. Следовательно, CSS-правило для селектора атрибута align будет применяться именно к первому абзацу, и только к нему. Синтаксис записи селектора атрибута: [атрибут] { … }
Составим правило для нашего примера (для наглядности укажем в дополнение к атрибуту еще и сам тег, для которого его следует рассматривать): p { color: green; font-weight: bold; }
Нетрудно догадаться, что получится в итоге: До сих пор я описывал так называемый простой селектор атрибута. Для него важно только само наличие атрибута у тега, но совершенно не важно его значение. Между тем, существуют и другие виды селекторов атрибутов. Давайте вкратце их рассмотрим: [атрибут=”значение”] { … }
Применяется только к тем элементам, которые имеют указанное значение данного атрибута. [атрибут^=”значение”] { … }
Почти то же самое, только в этом случае атрибут должен лишь начинаться с указанного значения, а не обязательно содержать его целиком. [атрибут$=”значение”] { … }
Аналогично, с той разницей, что здесь атрибут должен заканчиваться указанным значением. [атрибут*=”значение”] { … }
Такая запись показывает, что значение может встречаться в любом месте атрибута. Как видишь, соседние, дочерние и селекторы атрибутов дают нам много новых возможностей для написания эффективного CSS-кода. Можно придумать огромное количество примеров, в которых их использование будет предпочтительнее, чем «традиционных» всем известных селекторов. Поэтому я думаю, будет разумным взять эти приемы на вооружение. А как их применять, решать только тебе. Добрый вечер уважаемые коллеги, сегодня мы изучим с Вами два дополнительных селектора
, которые
называются дочерними и соседними селекторами css
. В большей степени можно обойтись и без них, однако,
для вашего развития их нужно усвоить, и иногда применять, чтобы они оставались в вашей памяти. Поэтому обсудим, какие селекторы
являются
соседними, а какие дочерними и разберем на примере.
Текст в абзаце
Уже не дочерний текст в абзаце
p > em {color: blue; } /* Дочерний селектор */
p em {color: blue; } /* Контекстный селектор */
Автор статьи: Алексей Антонов, создатель и администратор блога о веб-технологиях www.lounwolf.ru
=====================================================================
Дочерние селекторы css
- элементы, которые располагаются внутри родительского элемента. Пример этому может быть следующим.
Мы имеем блок, в котором находится параграф, еще один блок и картинка. Вот эти три элемента и являются дочерними. Если в дочернем блоке также находятся
другие элементы, то они уже не являются дочерними у первого блока, а являются дочерними у блока, в котором непосредственно находятся. Надеюсь, суть
Вы уловили.
Соседние селекторы CSS
- элементы располагающиеся друг за другом в коде документа. Пример этому такой. Мы имеет параграф и
следующий за ним тег span
. Все довольно ясно, а нам лишь осталось разобрать все это на реальных примерах.
Текст в span
При помощи стилей добавим одинаковый результат для тега span
Div >
span {
font-size
: 200%;
}
p +
span {
color
: red;
}
Результат выполнения кода в обоих случаях будет применяться к тегу span , т.к., он является дочерним по отношению к тегу div и следующим после тега p . Поэтому шрифт стал в два раза больше и красного цвета. Теперь мы с Вами полностью разобрались с дочерними и соседними селекторами в CSS , а Вам остается лишь укреплять свои знания на практике, до скорого!
