) и дочерний селектор (тег
является дочерним по отношению к
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить 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; }
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }
- Зелёный.
- Синий.
- Оранжевый.
- Оливковый.
- Жёлтый.
2. Какой элемент является родительским для тега ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. Для какого тега элемент <!DOCTYPE> выступает родителем?
</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Ни для одного тега.</li>
</ol><h2>Ответы</h2>
<p>1. Оливковый.</p>
<p>3. Ни для одного тега.</p>
<p>Здравствуйте, уважаемые читатели! Продолжая тему CSS селекторов хочу предложить вашему вниманию <b>описание дочерних и контекстных селекторов
</b>, а также их сравнительный анализ, поскольку по логике применения они очень похожи, хотя обладают некоторым отличием.</p>
<p>В своих публикациях я довольно подробно останавливался на различных видах CSS селекторов: ; а также . Кстати, в последней статье, где разбирались разные виды селектора атрибута, я довольно подробно описал, как мои теоретические выкладки можно тут же проверить, внося изменения в HTML и CSS код онлайн с помощью встроенного инструмента Google Chrome (). Такие средства редактирования имеют новейшие модификации всех популярных браузеров, включая плагин Firebug для Firefox ().</p>
<p>Теоретический материал этого поста вы можете также изучать, делая редактирование любой страницы любого сайта! Для этого просто нажмите F12, если пользуетесь Google Chrome или Mozilla Firefox (). А теперь представлю содержание тега p, на примере которого будем изучать <i>дочерние и контекстные CSS селекторы
</i>:</p><p>
<p>Этот абзац включает <strong><em>теги форматирования em и strong</em></strong>,
которые выделяют текст <strong>жирным</strong> и <em>курсивом</em>.
</p><p>Пользуясь вышеописанным инструментом для редактирования я вставил данный абзац прямо в настоящую статью, вписав соответствующий текст в левой части окна для редактирования, в результате чего текст этого параграфа появился в самом верху страницы:</p>
<p><br><img src='https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/abzatc-v-brauzere.png' align="center" width="100%" loading=lazy></p>
<p>Эта HTML конструкция , . Этот параграф будет подопытным в сегодняшней публикации, на его примере я покажу, как меняется оформление его текста, в зависимости от того, какие селекторы - дочерние или контекстные - используются в правиле CSS.</p>
<p><i>Дочерним называется элемент, который расположен непосредственно внутри родительского
</i>. Прежде чем приступить непосредственно к теме, приведу картинку, которая отражает иерархию тегов в HTML документе на примере абзаца, текст которого приведен выше и который будем сегодня разбирать:</p>
<p><img src='https://i1.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/derevo-elementov.png' align="center" height="174" width="302" loading=lazy></p>
<p>Такая конструкция еще называется деревом элементов. На этом рисунке наглядно представлена вложенность контейнеров, что и предполагает иерархические отношения между тегами. Тег абзаца p является дочерним элементом по отношению . В то же время тег strong не является дочерним для div, так как раcполагается в контейнере p.</p>
<h2>Дочерний CSS селектор</h2>
<p>Дочерний селектор в дереве элементов находится всегда непосредственно внутри родительского элемента, в этом случае синтаксис написания CSS селектора будет следующим:</p>
<p>Стиль будет применен к Селектору 2, но только в том случае, если он является дочерним для Селектора 1. Разберем более подробно, используя приведенный выше скриншот с деревом элементов. Например, следуя синтаксису, можно установить такое правило:</p><p>P> em {color: green;}
</p><p>Это правило будет влиять на последнее слово абзаца “курсивом”, поскольку именно оно заключено между открывающим и закрывающим тегами em. Тег em является дочерним для p, потому что размещается непосредственно внутри него, следовательно текст содержания, а именно слово “курсивом” будет окрашено в зеленый цвет.</p>
<p><br><img src='https://i2.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/abzatc-dochernii-selektor.png' align="center" width="100%" loading=lazy></p>
<p>Однако другое тег em не служит прямым потомком тега p, так как входит в состав тега strong, вследствии чего часть абзаца “теги форматирования em и strong” не будет окрашена.</p>
<h2>Контекстный CSS селектор</h2>
<p>Настала очередь разобраться, <b>что такое контекстный селектор CSS
</b>. При верстке той или иной страницы сайта очень часто теги вкладываются один в другой. Для того, чтобы стили для таких элементов работали корректно, используются селекторы, которые действуют в каком-то контексте, отсюда и название.</p>
<p>Если для того, чтобы CSS правило было бы применено, дочерний селектор должен обязательно находиться непосредственно внутри родительского элемента (первый уровень вложенности), то для контекстного селектора это совершенно неважно и может быть применен любой уровень вложенности, все равно свойства элемента будут переданы от родителя. При этом синтаксис такой:</p>
<p>Как видим, контекстный селектор состоит из простых селекторов, разделенных пробелом. Для контекстных селекторов допускается применять два и более вложенных друг в друга тега. Составим теперь CSS правило для испытуемого параграфа, который я приводил выше:</p><p>P em {color: green;}
</p><p><br><img src='https://i1.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/abzatc-kontekstnyi-selektor.png' align="center" width="100%" loading=lazy></p>
<p>Как видите, зеленым окрашен не только текст части содержания абзаца, который непосредственно заключен в тег форматирования em, то есть слово “курсивом”, но и участок текста другого тега em, который входит еще и в состав тега strong. Это случилось потому, что действует правило с контекстным селектором, для которого не важен уровень вложенности в отличие от дочернего селектора. В этом и есть принципиальная разница дочернего и контекстного селектора.</p>
<p>Рассмотрим еще один пример взаимодействия контекстных и дочерних селекторов с нашим абзацем. Пропишем cледующие CSS правила для дочернего и контекстного селектора:</p><p>Div em {color: red;}
p> em {color: green;}
</p><p>После этого наш абзац приобретает такое оформление:</p>
<p><br><img src='https://i0.wp.com/goldbusinessnet.com/wp-content/uploads/2013/02/kontekstnyi-dochernii-selektor.png' align="center" width="100%" loading=lazy></p>
<p>Как видите, кусок текста, заключенный в теги em и strong, выкрашен в красный цвет, потому что для него справедливо правило контекстного селектора, то есть тег em заключен в контейнеры strong и div, а уровень вложенности, как уже было отмечено, не имеет значения.</p>
<p>Возникает вопрос: почему же слово “курсивом”, тоже являющееся содержанием em, окрашено в зеленый цвет? Ведь и для него правило контекстного селектора является актуальным. Но для этого участка текста абзаца справедливо и правило дочернего селектора, потому что оно не противоречит тому условию, что для дочернего селектора элемент должен непосредственно входить в состав тега p.</p>
<p>Дело в том, в CSS действует закон приоритета для CSS свойств, находящихся ниже. То есть в данном случае правило дочернего селектора находится в документе ниже, чем CSS стили, прописанные для контекстного селектора контейнера div. Поэтому слово “курсивом” стало зеленым. Если поменять их местами, то правило «p> em {color: green;}» перестает действовать и участок текста “курсивом” будет красным.</p>
<p><span class="2FpxLiWbD3g"></span></p>
<p>Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в CSS, а также познакомитесь с некоторыми дополнительными псевдоклассами для более точной выборки.</p>
<h2>Дочерние селекторы CSS</h2>
<p>В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.</p>
<p>Представьте, что вам нужно присвоить стиль только тем тегам <p>Которые являются дочерними по отношению к <body> , не затрагивая остальные <p> (например, <p>Дочерние по отношению к <div>).<br>
Как это сделать? Очень просто: создадим дочерний селектор:</p><p>Body > p {
color: #333;
}
</p><p>Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов <p>Родителя <body> . Если символ убрать, то стиль применится абсолютно ко всем тегам <p>Которые находятся внутри тега <body> , хотя они могут и не являться для него дочерними.</p>
<h3>Дополнительные псевдоклассы</h3>
<p>В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».</p>
<ul><li>:first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является <b>первым
</b> </li>
<li>:last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является <b>последним
</b> дочерним элементом своего родителя;</li>
<li>:nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;</li>
<li>:only-child – применяется к дочернему элементу при условии, что тот является <b>единственным
</b> ребенком у родителя;</li>
<li>:first-of-type – стиль применяется к <b>первому элементу указанного типа
</b> (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);</li>
<li>:last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к <b>последнему элементу указанного типа
</b>;</li>
<li>:nth-of-type – по принципу работы похож на:nth-child , но ориентируется на <b>тип
</b> элемента;</li>
<li>:only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя <b>единственным ребенком своего типа
</b>.</li>
</ul><h4>Пример использования:first-child, :last-child и:nth-child</h4>
<!-- HTML -->
<div>
<p>Первый ребенок</p>
<p>Второй ребенок</p>
<p>Третий ребенок</p>
<table>
<tr>
<td>Нечетный номер</td>
</tr>
<tr>
<td>Четный номер</td>
</tr>
<tr>
<td>Нечетный номер</td>
</tr>
<tr>
<td>Четный номер</td>
</tr>
</table>
<p>Последний ребенок</p>
</div>
<p>
/* 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
</p><p>Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег <div> является родителем для тегов <p> , <table> . Разберем CSS по порядку.</p>
<p>Первое правило – p:first-child – касается элемента p: если он является <b>первым дочерним элементом своего родителя
</b>, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега <div> добавить еще какой-нибудь тег (к примеру, <h2>), то стиль p:first-child уже не будет отображаться, поскольку <p>Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .</p>
<p>Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу <p>Лишь тогда, когда он будет являться <b>последним дочерним элементом своего родителя
</b>. Добавьте после <p>Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.</p>
<p>Правило p:nth-child(3) работает для <b>третьего
</b> дочернего тега <p> (об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.</p>
<p>Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.</p>
<h4>Пример использования:first-of-type, :last-of-type, :nth-of-type и:only-of-type</h4>
<!-- HTML -->
<div>
<h2>Первый ребенок</h2>
<p>Второй ребенок</p>
<p>Третий ребенок</p>
<h3>Четвертый ребенок</h3>
<p>Пятый ребенок</p>
<h4>Последний ребенок</h4>
</div>
<p>
/* 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;
}
h3:only-of-type {
text-decoration: underline;
}
<br><img src='https://i2.wp.com/idg.net.ua/blog/wp-content/uploads/of-type-pseudo-classes.png' width="100%" loading=lazy> Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type
</p><p>Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который <b>первым
</b> встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type .</p>
<p>Второе правило – p:last-of-type – применяет стиль к <b>последнему
</b> дочернему элементу типа p . Как видно из HTML-кода, после последнего тега <p>Есть еще и тег <h4> , присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с:last-of-child).</p>
<p>Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу <p>Который является <b>третьим
</b> по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу <p>Который по факту является пятым ребенком тега <div> . Но если не брать во внимание элементы других типов, то получается, что тег <p>С красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.</p>
<p>Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.</p>
<p>Последнее правило – h3:only-of-type – применяется к содержимому тега <h3> , делая текст подчеркнутым. Данный стиль работает лишь потому, что тег <h3> является <b>единственным
</b> дочерним элементом своего типа. Если в HTML-код добавить еще один тег <h3> , стиль не будет применён.</p>
<h3>Выводы</h3>
<p>Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.</p>
<p>С помощью дополнительных псевдоклассов:first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.</p>
<p>Псевдоклассы:first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.</p>
<p>Последнее обновление: 21.04.2016</p>
<p>Особую группу псевдоклассов образуют псевдоклассы, которые позволяют выбрать определенные дочерние элементы:</p>
<ul><p>:first-child
: представляет элемент, который является первым дочерним элементом</p>
<p>:last-child
: представляет элемент, который является последним дочерним элементом</p>
<p>:only-child
: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере</p>
<p>:only-of-type
: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере</p>
<p>:nth-child(n)
: представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент</p>
<p>:nth-last-child(n)
: представляет дочерний элемент, который имеет определенный номер n, начиная с конца</p>
<p>:nth-of-type(n)
: выбирает дочерний элемент определенного типа, который имеет определенный номер</p>
<p>:nth-last-of-type(n)
: выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца</p>
</ul><h3>Псевдокласс first-child</h3>
<p>Используем псевдокласс first-child для выбора первых ссылок в блоках:</p><p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3
Планшеты
Смартфоны
