Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Дочерние селекторы в css

Селекторы дочерних элементов CSS. Дополнительные псевдоклассы — учебник 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:

/* 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-документа, где тег является родителем для тегов

. Разберем CSS по порядку.

Первое правило – p:first-child – касается элемента p: если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега добавить еще какой-нибудь тег (к примеру,

), то стиль p:first-child уже не будет отображаться, поскольку
перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h3.

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу
лишь тогда, когда он будет являться последним дочерним элементом своего родителя. Добавьте после
любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега
(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type

Первый ребенок

Второй ребенок

Третий ребенок

Четвертый ребенок

Пятый ребенок

Последний ребенок

Стиль CSS:

/* CSS */ p:first-of-type { color: violet; text-transform: uppercase; } p:last-of-type { font-style: italic; font-size: 0.8em; } p:nth-of-type(3) { color: red; } p:nth-of-type(odd) { background-color: #A2DED0; } p:nth-of-type(even) { background-color: #C8F7C5; } h4:only-of-type { text-decoration: underline; }

Скриншот: применение :first-of-type, :last-of-type, :nth-of-type и :only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type. Что оно делает? Оно выбирает дочерний элемент типа p, который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами :first-child и :first-of-type.

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p. Как видно из HTML-кода, после последнего тега

есть еще и тег

, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу
, который является третьим по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу
, который по факту является пятым ребенком тега . Но если не брать во внимание элементы других типов, то получается, что тег
с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p, то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h4:only-of-type – применяется к содержимому тега

, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег

является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег

, стиль не будет применён.

Выводы

Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.

С помощью дополнительных псевдоклассов :first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.

Псевдоклассы :first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.

Следующая часть этой главы – о смежных и родственных селекторах.

Дочерние и контекстные CSS селекторы | Создание сайтов и заработок в сети

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

В своих публикациях я довольно подробно останавливался на различных видах CSS селекторов: id (идентификаторах), классах (class), селекторах тегов; а также различных вариациях селекторов атрибута. Кстати, в последней статье, где разбирались разные виды селектора атрибута, я довольно подробно описал, как мои теоретические выкладки можно тут же проверить, внося изменения в HTML и CSS код онлайн с помощью встроенного инструмента Google Chrome (скачать бесплатно последнюю версию, установить и настроить самый быстрый браузер). Такие средства редактирования имеют новейшие модификации всех популярных браузеров, включая плагин Firebug для Firefox (как установить, скачать и пользоваться).

Теоретический материал этого поста вы можете также изучать, делая редактирование любой страницы любого сайта! Для этого просто нажмите F12, если пользуетесь Google Chrome или Mozilla Firefox (скачать бесплатно Мазила Фаерфокс). А теперь представлю содержание тега p, на примере которого будем изучать дочерние и контекстные CSS селекторы:

Этот абзац включает теги форматирования em и strong, которые выделяют текст жирным и курсивом.

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

Эта HTML конструкция содержит тег абзаца p, теги форматирования текста em и strong. Этот параграф будет подопытным в сегодняшней публикации, на его примере я покажу, как меняется оформление его текста, в зависимости от того, какие селекторы - дочерние или контекстные - используются в правиле CSS.

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

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

Дочерний CSS селектор

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

Стиль будет применен к Селектору 2, но только в том случае, если он является дочерним для Селектора 1. Разберем более подробно, используя приведенный выше скриншот с деревом элементов. Например, следуя синтаксису, можно установить такое правило:

p> em {color: green;}

Это правило будет влиять на последнее слово абзаца “курсивом”, поскольку именно оно заключено между открывающим и закрывающим тегами em. Тег em является дочерним для p, потому что размещается непосредственно внутри него, следовательно текст содержания, а именно слово “курсивом” будет окрашено в зеленый цвет.

Однако другое тег em не служит прямым потомком тега p, так как входит в состав тега strong, вследствии чего часть абзаца “теги форматирования em и strong” не будет окрашена.

Контекстный CSS селектор

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

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

Как видим, контекстный селектор состоит из простых селекторов, разделенных пробелом. Для контекстных селекторов допускается применять два и более вложенных друг в друга тега. Составим теперь CSS правило для испытуемого параграфа, который я приводил выше:

p em {color: green;}

Теперь содержание данного параграфа будет оформлено таким образом:

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

Рассмотрим еще один пример взаимодействия контекстных и дочерних селекторов с нашим абзацем. Пропишем cледующие CSS правила для дочернего и контекстного селектора:

div em {color: red;} p> em {color: green;}

После этого наш абзац приобретает такое оформление:

Как видите, кусок текста, заключенный в теги em и strong, выкрашен в красный цвет, потому что для него справедливо правило контекстного селектора, то есть тег em заключен в контейнеры strong и div, а уровень вложенности, как уже было отмечено, не имеет значения.

Возникает вопрос: почему же слово “курсивом”, тоже являющееся содержанием em, окрашено в зеленый цвет? Ведь и для него правило контекстного селектора является актуальным. Но для этого участка текста абзаца справедливо и правило дочернего селектора, потому что оно не противоречит тому условию, что для дочернего селектора элемент должен непосредственно входить в состав тега p.

Дело в том, в CSS действует закон приоритета для CSS свойств, находящихся ниже. То есть в данном случае правило дочернего селектора находится в документе ниже, чем CSS стили, прописанные для контекстного селектора контейнера div. Поэтому слово “курсивом” стало зеленым. Если поменять их местами, то правило «p> em {color: green;}» перестает действовать и участок текста “курсивом” будет красным.

Надеюсь, дорогие читатели, вы уяснили для себя нюансы использования дочерних и контекстных селекторов, в следующей статье рассмотрим еще парочку CSS селекторов, которые играют немаловажную роль, поэтому подпишитесь, кто это еще не сделал, на получение свежих материалов. Вообще я любитель классики во всех ее проявлениях, в том числе музыкальном. Однако с удовольствием слушаю хорошие произведения в стиле hip-hop, с одним из таких хочу поделиться с вами, содержание лучших из них иногда поражает глубиной содержания, хотя исполняют их молодые люди.

Контекстные, дочерние и соседние селекторы css

Цель урока: знакомство с контекстными, дочерними и соседними селекторами css. Рассмотрены примеры создания стилей, приоритет селекторов

Три вида взаимоотношений в дереве элементов

Предки-потомки;
Родитель-ребенок;
Братья (соседи)

Рассмотри дерево элементов на примере:

1 2 3 4 5 6 7 8 9

Заголовок Первый параграф в div Второй параграф в div Просто полужирный текст в div Первый параграф в body

Заголовок

Первый параграф в div

Второй параграф в div

Просто полужирный текст в div

Первый параграф в body

Родительский элемент – тег, который содержит в себе рассматриваемый элемент.

В примере отношения родитель-ребенок:

Элемент div (2 строка) — родительский по отношению к тегу h2 (3 строка), тогда как h2 — напротив, дочерний элемент (ребенок)
Элемент p (4 строка) является родительским по отношению к strong (4 строка), тогда как strong — напротив, дочерний элемент (ребенок)
Элемент div (2 строка) является родительским по отношению к strong (6 строка), тогда как strong — напротив, дочерний элемент (ребенок)
Элемент p (8 строка) является родительским по отношению к strong (8 строка), тогда как strong — напротив, дочерний элемент (ребенок)
Элемент body (1 строка) является родительским по отношению к div (2 строка) и p (8 строка)

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

В примере отношение предок-потомок:

Элемент body является предком для элементов h2(3 строка), p и strong (4 строка), p и strong (5 строка), strong (6 строка) и strong (8 строка); в то время как все, перечисленные элементы являются потомками body
Элемент div (2 строка) является предком для элементов strong (4 и 5 строка); в то время как strong является потомком для div

Братский элемент (соседний) – элемент, который имеет общий родительский элемент с рассматриваемым.

В примере отношение соседи (братья):

Элементы h2 (3 строка), p(4 строка), p(5 строка) и strong(6 строка) являются братьями или соседними элементами.
Элементы div(2 строка) и p(8 строка) являются братьями или соседними элементами.

Правила контекстных селекторов также распространяются и на отношение родитель-ребенок.

Синтаксис:

x y{ свойство1: значение; свойство2: значение; }

x — селектор-предок, y — селектор-потомок Правило будет действовать на селектор y

Пример: В hrml-код страницы необходимо добавить правило для контекстных селекторов:

1 2 3 4 5

Жирное начертание текста Одновременно жирное начертание текста и выделенное цветом

Жирное начертание текста

Одновременно жирное начертание текста и выделенное цветом

Необходимо: Создать правило контекстных секторов для элемента b

Селектор дочернего элемента CSS

Сущность селектора

Основная задача данного селектора следует из его названия и заключается в обращении к дочернему элементу. Выводится с помощью элементарного знака «>», который связывает дочерний элемент с элементом родителя. Также стоит отметить, что в обращении используется простые селекторы. В качестве примера рассмотрим следующую кодировку:

.element > ul { padding-top: 20px; }

Данная кодировка означает, что к списку, который вложен в element, будет применен внутренний отступ в 20 пикселей от верхнего края. Наличие в этой записи значка «>» показывает, что правило применится только к спискам первого уровня вложенности.

Подробный анализ работы селектора дочернего элемента

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

Более наглядно оценить работу оператора дочернего селектора поможет следующий пример:

CSS

div > р { color: #ff0000; /* красный */ }

HTML

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

Данный пример подтверждает работу оператора дочернего селектора согласно степени вложенности.

Ограничение для применения оператора дочернего селектора

Стоит отметить, что данная операция поддерживается всеми браузерами кроме легендарного Internet Explorer 6. Думаю, мало кто использует данный браузер, однако же если таковые уникумы имеются, то для них существует выход из ситуации, который будет описан в отдельной статье.

Зачем применяется

Программеры обращаются к селекторам элементов дочерних в тех случаях, когда нужно присвоить свой уникальный стиль вложенным элементам. Также использование этого селектора может сократить объем CSS, что повысит читабельность документа. Как показывает практика, к этой операции обращаются чаще всего при создании выпадающих менюшек.

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

.main > header { /* оформление относится только к главному хедеру */ }

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

Подводя итоги

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

Оценок: 1 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям: