Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега
Основная задача данного селектора следует из его названия и заключается в обращении к дочернему элементу. Выводится с помощью элементарного знака «>», который связывает дочерний элемент с элементом родителя. Также стоит отметить, что в обращении используется простые селекторы. В качестве примера рассмотрим следующую кодировку:
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-файла и делает его более читабельным.
Подводя итоги
Таким образом, оператор дочернего элемента можно применять не только для оформления выпадающих меню, но и для небольшой оптимизации вашего интернет ресурса к работе поисковых роботов.
Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в CSS, а также познакомитесь с некоторыми дополнительными псевдоклассами для более точной выборки.
Дочерние селекторы CSS
В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.
Представьте, что вам нужно присвоить стиль только тем тегам
Которые являются дочерними по отношению к
, не затрагивая остальные(например,
Дочерние по отношению к
Как это сделать? Очень просто: создадим дочерний селектор:
Body > p { color: #333; }
Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов
Родителя
. Если символ убрать, то стиль применится абсолютно ко всем тегамКоторые находятся внутри тега
, хотя они могут и не являться для него дочерними.Дополнительные псевдоклассы
В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».
- :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым
- :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;
- :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
- :only-child – применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;
- :first-of-type – стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
- :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа ;
- :nth-of-type – по принципу работы похож на:nth-child , но ориентируется на тип элемента;
- :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа .
Пример использования:first-child, :last-child и:nth-child
Первый ребенок
Второй ребенок
Третий ребенок
Нечетный номер |
Четный номер |
Нечетный номер |
Четный номер |
Последний ребенок
/* CSS */ p:first-child { font-weight: bold; text-transform: uppercase; } p:last-child { font-style: italic; font-size: 0.8em; } p:nth-child(3) { color: red; } tr:nth-child(odd) { background-color: #A2DED0; } tr:nth-child(even) { background-color: #C8F7C5; } Скриншот: применение:first-child, :last-child и:nth-child
Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег
,
Ячейка 1.1 | Ячейка 1.2 |
Ячейка 2.1 | Ячейка 2.2 |
А теперь вопрос. Как вы поступите, если вам понадобится с помощью дочерних селекторов пройти от тега к ячейкам? Если вы решили написать вот так, то это неверно:
table > tr > td { свойство: значение; свойство: значение; ... }
А догадываетесь, почему неверно? Нет? Дело в том, что вы забыли еще про один элемент - , который даже если не указан явно, то все равно незримо присутствует в каждой HTML-таблице. Просто у него нет обязательных открывающих и закрывающих тегов, поэтому про него часто забывают. Кстати да, в HTML-учебнике мы его с вами не проходили, так как в реальности его явное указание редко когда нужно. Ну, думаю вы уже догадались, какая будет правильная запись, но я вам все же покажу.
table > tbody > tr > td { свойство: значение; свойство: значение; ... }
Кстати, не только таблицы имеют элементы с необязательными открывающими тегами, есть и еще такие элементы. Просто на практике «проблемы забывчивости» возникают чаще всего именно с таблицами, поэтому я и заострил ваше внимание на этом.
Домашнее задание.
- Установите на странице шрифт Arial с размером 0.9em и какой-нибудь фон.
- Напишите на странице несколько заголовков и параграфов, измените размер и цвет текста заголовков так, как посчитаете нужным.
- Сделайте так, чтобы ссылки непосредственно в параграфах страницы были синего цвета без подчеркивания. Но при этом, если ссылки дополнительно обрамляются любым тегом, например для курсива, то они должны отображаться уже с подчеркиванием и красного цвета. Еще раз заостряю ваше внимание на том, что не надо прописывать стили ссылок с каждым обрамляющим тегом в отдельности, сделайте универсально. Как? Подумайте.
- Создайте небольшое меню в правой части страницы и зафиксируйте его, для этого вам понадобится свойство и еще парочка сопутствующих ему свойств, там разберетесь. При этом, пусть меню не только остается на месте в пределах окна браузера, но и при скроллинге не наползает на содержимое страницы.
Думаю последний пункт урока будет для вас самым сложным, но не пытайтесь сразу полностью погрузиться в освоение позиционирования. Просто сделайте домашнее задание. Кстати, этот пункт не будет работать в Internet Explorer 6.0, так как старичек не понимает фиксированное позиционирование.
Я думаю, что многие знают о контекстных селекторах в CSS . Они используются чаще всего, однако, опытные верстальщики прекрасно знают, что иногда контекстные селекторы вносят определённые проблемы. Это проблема связана с тем, что в структуре элемента может быть много одинаковых элементов, вложенных друг в друга. И необходимо применить стиль не для всех вложенных элементов, а только к непосредственно дочернему элементу. Вот для этого и используются дочерные селекторы в CSS .
Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой HTML-код :
Первый абзац
Второй абзац
И наша задача сделать красным только "Второй абзац ". Если мы напишем с использованием контекстного селектора:
Container p {
color: red;
}
То у нас станут красным оба абзаца, что нам совсем не нужно. Данная задача очень просто решается с помощью дочерних селекторов в CSS :
Container > p {
color: red;
}
Всё, теперь красным у нас стал только "Второй абзац ". Поскольку именно данный абзац является непосредственно дочерним для .container . А "Первый абзац " является дочерним для внутреннего div , таким образом, под действие дочернего селектора он не попадает.
Вот так легко решаются такие задачи, однако, есть один огромный минус дочерних селекторов в CSS - они не работают в браузерах Internet Explorer . По этой причине, их использование крайне нежелательно. Но если Вы вдруг где-нибудь встретите, то теперь Вы будете знать, что означает данный тип селекторов и что он делает.