Я думаю, что многие знают о контекстных селекторах в CSS . Они используются чаще всего, однако, опытные верстальщики прекрасно знают, что иногда контекстные селекторы вносят определённые проблемы. Это проблема связана с тем, что в структуре элемента может быть много одинаковых элементов, вложенных друг в друга. И необходимо применить стиль не для всех вложенных элементов, а только к непосредственно дочернему элементу. Вот для этого и используются дочерные селекторы в CSS .
Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой HTML-код :
Первый абзац
Второй абзац
И наша задача сделать красным только "Второй абзац ". Если мы напишем с использованием контекстного селектора:
Container p {
color: red;
}
То у нас станут красным оба абзаца, что нам совсем не нужно. Данная задача очень просто решается с помощью дочерних селекторов в CSS :
Container > p {
color: red;
}
Всё, теперь красным у нас стал только "Второй абзац ". Поскольку именно данный абзац является непосредственно дочерним для .container . А "Первый абзац " является дочерним для внутреннего div , таким образом, под действие дочернего селектора он не попадает.
Вот так легко решаются такие задачи, однако, есть один огромный минус дочерних селекторов в CSS - они не работают в браузерах Internet Explorer . По этой причине, их использование крайне нежелательно. Но если Вы вдруг где-нибудь встретите, то теперь Вы будете знать, что означает данный тип селекторов и что он делает.
Дочерние элементы - это элементы, которые располагаются непосредственно внутри родительского элемента. Обратите внимание на слова: непосредственно внутри.
Давайте рассмотрим пример простого html-кода:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
В этом коде два абзаца. Внутри абзацев расположены строчные элементы , и . Во втором абзаце тег вложен в тег .
Теперь давайте к этому html-коду добавим CSS-стили с использованием дочерних селекторов.
Синтаксис дочерних селекторов:
Селектор 1 > Селектор 2 { Свойство: значение; }
Вот обновлённый код:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
Итак, вспомним: дочерний элемент - это элемент вложенный непосредственно в родительский. То есть, дочерний элемент - это потомок первого уровня. Давайте обратим внимание на тег , в первом абзаце он вложен в тег
А во втором он вложен в тег , хотя также является потомком тега
Поэтому во втором абзаце CSS правило для дочернего селектора p>i { color : blue ; } не сработает - наклонный текст второго абзаца не будет отображён синим цветом.
Рисунок 1. Работа примера №1.
Добраться к html-элементу второго абзаца можно используя CSS-правило: p>u>i { color : blue ; }.
Давайте при помощи такого правила зададим наклонному тексту второго абзаца жёлтый цвет.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
Этот стиль сработает и наклонный текст во втором абзаце будет отображён жёлтым цветом.
У нас есть html-код:
По умолчанию он интерпритируется так:
Задача: при помощи CSS превратить этот список в горизонтальное меню.
Вот решение этой задачи с использованием дочерних селекторов:
Для лучшего понимания этого примера читайте.
Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей CSS. Их очень много. Одни задают параметры шрифтов, другие параметры фона, третьи параметры отступов и рамок.
В этой статье мы поговорим о селекторах стилей. В одной из статье мы уже затрагивали . А сегодня рассмотрим еще несколько видов селекторов, которые не явно привязывают правило стиля к элементу веб-страницы. Это так называемые специальные селекторы. Их бывает несколько видов.
Комбинаторы — это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.
Первый комбинатор символ плюс (+) или соседний селектор . Плюс устанавливается между двумя селекторами:
<селектор 1> + <селектор 2> { <стиль> }
Стиль в этом случае применяется к селектору 2 , но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:
strong + i {
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст
Это обычный текст. Это жирный текст, обычный текст, и это обычный текст.
Результат:
Стиль описанный в примере будет применен только к первому тексту заключенному в тег , т.к. он следует сразу же после тега .
Комбинатор тильда (~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:
<селектор 1> ~ <селектор 2> { <стиль> }
Стиль будет применен к селектору 2 , который должен следовать за селектором 1 . Рассмотри пример:
strong ~ i {
color: red; /* Красный цвет текста */
}
...
Это обычный текст. Это жирный текст, обычный текст, красный текст к нему применилось правило соседних селекторов.
Это обычный текст. Это жирный текст, обычный текст, а это красный текст.
Результат:
Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег , несмотря на то, что во втором случае между тегом и стоит тег .
Комбинатор > относится к дочерним селекторам . Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:
<селектор 1> > <селектор 2> { <стиль> }
Стиль будет привязан к селектору 2 , который непосредственно вложен в селектор 1 .
div > strong {
}
...
Это обычный текст. А это обычный жирный текст.
И результат:
Как видно на рисунке, правило стиля подействовало только на первый тег
, который непосредственно вложен в тег
, поэтому правило на него не действует. Следующим рассмотрим контекстный селектор <пробел>
. Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности: <селектор 1> <селектор 2> { <стиль> } Стиль будет применен к селектору 2
, если он так или иначе вложен в селектор 1
. Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор: div strong { Это обычный текст. А это тоже курсивный жирный текст. Обычный текст и просто жирный текст Результат: Как видим, на этот раз правило подействовало на оба тега
, даже на тот, который вложен и в контейнер
. На тег
, который просто вложен в абзац
правило css никак не действует. Селекторы атрибутов — это специальные селекторы, которые привязывают стиль к элементу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение. Существует несколько вариантов применения таких селекторов. Имеет вид: <селектор>[<имя атрибута тега>] { <стиль> } И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например: strong{ Автомобиль это механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами. Результат: На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong
, к которому добавлен атрибут title
. Синтаксис этого селектора следующий: <селектор>[<имя атрибута тега>=<значение>] { <стиль> } Привязывает стиль
к элементам, теги которых имеют атрибут с указанным именем
и значением
. Пример: a{ Результат: Как видим, оба элемента типа гиперссылка имеют атрибут target
, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу
у которого атрибут target
имеет значение «_blank»
. Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор: [<имя атрибута тега>~=<значение>] { <стиль> } Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например: { Наш телефон: 777-77-77 Наш адрес: Москва ул. Советская 5 Получиться следующий результат: Правило применяется к элементу, у которого среди значений атрибута class
имеется значение tel
. В значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией: [атрибут|="значение"] { стиль } Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например: { Результат: В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „
. Данный селектор устанавливает стиль для элемента, если значение атрибута тега начинается с определенного значения. Может быть два варианта: [<имя атрибута тега>^=<подстрока>] { <стиль> } В первом случае стиль
применяется ко всем элементам, теги которых имеют атрибут с указанным именем
и значением, начинающимся с указанной подстроки
. Во втором случае тоже самое, только к определенным элементам указанным в основном селекторе
. Пример: a{ Результат: В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href
начинается со значения http://
. Привязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис: [<имя атрибута тега>$=<подстрока>] { <стиль> } В первом случае стиль
применяется ко всем элементам, у которых имеется атрибут
с указанным именем
и имеет значение оканчивающееся указанной подстрокой
. Во втором случае тоже самое, только к указанным селекторам
. Таким способом, например, можно по разному отображать различные форматы графических изображений. Например: IMG { Картинка формата gif Картинка формата png Результат: В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей. Этот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис: [<имя атрибута тега>*=<подстрока>] { <стиль> } Стиль
привязывается к элементам, у которых имеется атрибут
с указанным именем и его значение содержит указанную подстроку
. Например: IMG { Картинка из папки gallery Картинка из другой папки Результат: В примере стиль применяется к картинкам, которые загружены из папки «gallery»
. На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой: Селектор[атрибут1="значение1"][атрибут2="значение2"] { стиль } Кроме того напомню о специальных селекторах CSS: В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями. На этом все, до новых встреч. Влад Мержевич Дочерним называется элемент, который непосредственно располагается внутри родительского
элемента. Чтобы лучше понять отношения между элементами документа, разберём
небольшой код (пример 12.1). Пример 12.1. Вложенность элементов в документе HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat. Ut wisis enim ad minim veniam,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. В данном примере применяется несколько контейнеров, которые в коде располагаются
один в другом. Нагляднее это видно на дереве элементов, так называется структура
отношений тегов документа между собой (рис. 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
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Результат данного примера показан на рис. 12.2. Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора На тег
в примере действуют одновременно два правила: контекстный селектор (тег
расположен внутри
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I
ниже, как цвет текста изменится с красного на зеленый. Заметим, что в большинстве случаев от добавления дочерних селекторов можно
отказаться, заменив их контекстными селекторами. Однако использование дочерних
селекторов расширяет возможности по управлению стилями элементов, что в итоге
позволяет получить нужный результат, а также простой и наглядный код. Удобнее всего применять указанные селекторы для элементов, которые обладают
иерархической структурой — сюда относятся, например, таблицы и разные списки.
В примере 12.3 показано изменение вида списка с помощью стилей. За счёт
вложения одного списка в другой получаем разновидность меню. Заголовки при этом
располагаются горизонтально, а набор ссылок — вертикально под заголовками
(рис. 12.3). Рис. 12.3. Список в виде меню Для размещения текста по горизонтали к селектору LI
добавляется стилевое свойство float
. Чтобы при этом
разделить между собой стиль горизонтального и вертикального списка и применяются
дочерние селекторы (пример 12.3). Пример 12.3. Использование дочерних селекторов HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться. 1. Какой цвет будет у жирного курсивного текста в коде
Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам. При использовании следующего стиля?
P { color: green; } 2. Какой элемент является родительским для тега 3. Для какого тега элемент выступает родителем?
1. Оливковый. 3. Ни для одного тега. Основная задача данного селектора следует из его названия и заключается в обращении к дочернему элементу. Выводится с помощью элементарного знака «>», который связывает дочерний элемент с элементом родителя. Также стоит отметить, что в обращении используется простые селекторы. В качестве примера рассмотрим следующую кодировку: Element >
ul {
padding-
top:
20px;
}
Данная кодировка означает, что к списку, который вложен в element, будет применен внутренний отступ в 20 пикселей от верхнего края. Наличие в этой записи значка «>» показывает, что правило применится только к спискам первого уровня вложенности. Селектор элемента дочернего имеет схожие свойства с понятием селектор потомка. Однако существует характерная черта, которая показывает принципиальное отличие данных операций. Оно заключается в том, что влияние селектора потомка распространяется на абсолютно все элементы, в то время как дочерний селектор подчиняет стили позиций первого уровня классификаций. Более наглядно оценить работу оператора дочернего селектора поможет следующий пример: Div >
р {
color:
#ff0000; /* красный */
}
<
div>
Данная строка будет иметь по умолчанию черный текст.
<
span>
Эта строка перекраситься в красный в следствие того,
что р является дочерним
тегом для дива.
span>
<
p>
Опять видим черные буквы.
<
span>
Здесь мы видим тоже черные символы,
так как
для этого спана родителем является тег р.
span>
p>
div>
Данный пример подтверждает работу оператора дочернего селектора согласно степени вложенности. Стоит отметить, что данная операция поддерживается всеми браузерами кроме легендарного Internet Explorer 6. Думаю, мало кто использует данный браузер, однако же если таковые уникумы имеются, то для них существует выход из ситуации, который будет описан в отдельной статье. Программеры обращаются к селекторам элементов дочерних в тех случаях, когда нужно присвоить свой уникальный стиль вложенным элементам. Также использование этого селектора может сократить объем CSS, что повысит читабельность документа. Как показывает практика, к этой операции обращаются чаще всего при создании выпадающих менюшек. Также селектор элемента дочернего используется для присвоения уникальных стилей элементам, родители которых уже известны за ранее. Другими словами: Main >
header
{
/* оформление относится только к главному хедеру */
}
Данный пример справедлив в тех случаях, когда тег header используют для выделения заголовков статей. В нашем случае мы задаем оформление только основному хедеру, и не задеваем второстепенные. Этот прием также позволяет избегать применения лишнего раза идентификаторов, что в свою очередь облегчает вес CSS-файла и делает его более читабельным. Таким образом, оператор дочернего элемента можно применять не только для оформления выпадающих меню, но и для небольшой оптимизации вашего интернет ресурса к работе поисковых роботов.
font-style: italic /* Курсив */
}
...
Селекторы по атрибутам тега
1. Простой селектор атрибута
color:red;
}
...
2. Селектор атрибута со значением
color:red;
font-size:150%;
}
...
.ru" target="_blank">Ссылка в новом окне3. Одно из нескольких значений атрибута
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
color:red;
font-size:150%;
}
...
4. Дефис в значении атрибута
Селектор[атрибут|="значение"] { стиль }
color:red;
font-size:150%;
}
...
5. Значение атрибута начинается с определенного текста
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
color:green;
font-weight:bold;
}
...
6. Значение атрибута заканчивается определенным текстом
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
border: 5px solid red;
}
...
7. Значение атрибута содержит указанную строку
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
border: 5px solid red;
}
...
Вопросы для проверки
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }
Ответы
Подробный анализ работы селектора дочернего элемента
Ограничение для применения оператора дочернего селектора
Зачем применяется
Подводя итоги