Css selector child: CSS :nth-child() Selector
Дочерние селекторы | CSS | WebReference
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Какой элемент выступает родителем, а какой его потомком легко выяснить с помощью дерева элементов — так называется структура отношений элементов документа между собой (рис. 1).
Рис. 1. Дерево элементов
На рис. 1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к <div> выступает элемент <p>. Вместе с тем <strong> не является дочерним для элемента <div>, поскольку он расположен в контейнере <p>.
Синтаксис
E > F { Описание правил стиля }Стиль применяется к элементу F, только когда он является дочерним для элемента E.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Дочерние селекторы</title> <style> #menu { margin: 0; padding: 0; /* Убираем отступы */ } #menu > li { list-style: none; /* Убираем маркеры списка */ width: 100px; /* Ширина элемента в пикселах */ background: #b3d9d2; /* Цвет фона */ color: #333; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт */ font-size: 90%; /* Размер шрифта */ font-weight: bold; /* Жирное начертание */ float: left; /* Располагаем элементы по горизонтали */ } li > ul { list-style: none; /* Убираем маркеры списка */ margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */ border-bottom: 1px solid #666; /* Граница внизу */ padding-top: 5px; /* Добавляем отступ сверху */ } li > a { display: block; /* Ссылки отображаются в виде блока */ font-weight: normal; /* Нормальное начертание текста */ font-size: 90%; /* Размер шрифта */ background: #fff; /* Цвет фона */ border: 1px solid #666; /* Параметры рамки */ border-bottom: none; /* Убираем границу снизу */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <ul> <li>Правка <ul> <li><a href=»undo.html»>Отменить</a></li> <li><a href=»cut.html»>Вырезать</a></li> <li><a href=»copy.html»>Копировать</a></li> <li><a href=»paste.html»>Вставить</a></li> </ul> </li> <li>Начертание <ul> <li><a href=»bold.html»>Жирное</a></li> <li><a href=»italic.html»>Курсивное</a></li> <li><a href=»underline.html»>Подчеркнутое</a></li> </ul> </li> <li>Размер <ul> <li><a href=»small.html»>Маленький</a></li> <li><a href=»normal.html»>Нормальный</a></li> <li><a href=»middle.html»>Средний</a></li> <li><a href=»big.html»>Большой</a></li> </ul> </li> </ul> </body> </html>Рис. 2. Использование дочерних селекторов
Примечание
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (li > /* больше */ a).
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
:nth-child — Веб-технологии для разработчиков
CSS псевдокласс :nth-child() находит один или более элементов, основываясь на их позиции среди группы соседних элементов.
/* Выбирает каждый четвёртый элемент
среди любой группы соседних элементов */
:nth-child(4n) {
color: lime;
}
Синтаксис
Псевдокласс nth-child указывается с единственным аргументом, описывающим паттерн для выбирания элементов.
Ключевые слова
odd- Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.
even- Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.
Функциональная запись
<An+B>- Описывает элементы среди группы соседних с номерами, соответствующими паттерну
An+B(для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. ЗначенияAиBдолжны быть<integer>s.
Формальный синтаксис
:nth-child( <nth> [ of <complex-selector-list> ]? )где
<nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector># где
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*где
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]где
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')' где
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'где
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
Примеры
Примеры селекторов
tr:nth-child(odd)илиtr:nth-child(2n+1)- Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.
tr:nth-child(even)ortr:nth-child(2n)- Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.
:nth-child(7)- Описывает седьмой элемент.
:nth-child(5n)- Описывает элементы с номерами 5, 10, 15, и т. д.
:nth-child(3n+4)- Описывает элементы с номерами 4, 7, 10, 13, и т. д.
:nth-child(-n+3)- Описывает первые три элемента среди группы соседних элементов.
p:nth-child(n)- Описывает каждый элемент
<p>среди группы соседних элементов. Эквивалентно простому селекторуp. p:nth-child(1)илиp:nth-child(0n+1)- Описывает каждый элемент
<p>, являющийся первым среди группы соседних элементов. Эквивалентно селектору:first-child.
Подробный пример
HTML
<h4><code>span:nth-child(2n+1)</code>, БЕЗ элемента <code><em></code> в группе элементов-потомков.</h4> <p>Элементы 1, 3, 5 и 7 будут выбраны.</p> <div> <span>Span 1!</span> <span>Span 2</span> <span>Span 3!</span> <span>Span 4</span> <span>Span 5!</span> <span>Span 6</span> <span>Span 7!</span> </div> <br> <h4><code>span:nth-child(2n+1)</code>, С элементом <code><em></code> в группе элементов-потомков.</h4> <p>Элементы 1, 5 и 7 будут выбраны.<br> 3 используется в подсчёте потому что это элемент-потомок, но он не выбран потому что он не <code><span></code>.</p> <div> <span>Span!</span> <span>Span</span> <em>Это `em`.</em> <span>Span</span> <span>Span!</span> <span>Span</span> <span>Span!</span> <span>Span</span> </div> <br> <h4><code>span:nth-of-type(2n+1)</code>, С элементом <code><em></code> в группе элементов-потомков.</h4> <p>Элементы 1, 4, 6 и 8 будут выбраны.<br> 3 не используется в подсчёте и не выбран, потому что это <code><em></code>, но не <code><span></code>, а <code>nth-of-type</code> выбирает только потомков этого типа. Элемент <code><em></code> полностью пропускается и игнорируется.</p> <div> <span>Span!</span> <span>Span</span> <em>Это `em`.</em> <span>Span!</span> <span>Span</span> <span>Span!</span> <span>Span</span> <span>Span!</span> </div>
CSS
html {
font-family: sans-serif;
}
span,
div em {
padding: 5px;
border: 1px solid green;
display: inline-block;
margin-bottom: 3px;
}
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
background-color: lime;
}Результат
Спецификации
Поддержка браузерами
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
:nth-child() | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.5 | IE Полная поддержка 9 | Opera Полная поддержка 9.5
| Safari Полная поддержка 3.1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1
| Safari iOS Полная поддержка 3.1 | Samsung Internet Android Полная поддержка 1.0 |
| Matches elements with no parent | Chrome Полная поддержка 57 | Edge Полная поддержка 79 | Firefox Полная поддержка 52 | IE Нет поддержки Нет | Opera Полная поддержка 44 | Safari Нет поддержки Нет | WebView Android Полная поддержка 57 | Firefox Android Полная поддержка 52 | Opera Android Полная поддержка 43 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 7.0 | |
of <selector> syntax | Chrome
| Edge Нет поддержки Нет
| Firefox Нет поддержки
| IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Полная поддержка 9 | WebView Android Нет поддержки Нет | Chrome Android | Firefox Android Нет поддержки Нет
| Opera Android Нет поддержки Нет | Safari iOS Полная поддержка 9 | Samsung Internet Android Нет поддержки |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Смотрите замечания реализации.
- Смотрите замечания реализации.
См. также
:first-child — Веб-технологии для разработчиков
css псевдо-класс :first-child находит любой элемент, являющийся первым в своём родителе.
>
/* Выбирает любой <p>, который является первым элементом
среди своих братьев и сестер */
p:first-child {
color: lime;
}Note: Как изначально определено, выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это больше не требуется.
Синтаксис
:first-child
Примеры
Простой пример
HTML
<div> <p>This text is selected!</p> <p>This text isn't selected.</p> </div> <div> <h3>This text isn't selected: it's not a `p`.</h3> <p>This text isn't selected.</p> </div>
CSS
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
Результат
Стилизация списка
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
</ul>CSS
ul li {
color: blue;
}
ul li:first-child {
color: red;
font-weight: bold;
}Результат
Спецификации
Поддержка браузерами
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
:first-child | Chrome Полная поддержка 4 | Edge Полная поддержка 12 | Firefox Полная поддержка 3 | IE Полная поддержка 7
| Opera Полная поддержка 9.5 | Safari Полная поддержка 3.1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 4 | Samsung Internet Android Полная поддержка 1.0 |
| Matches elements with no parent | Chrome Полная поддержка 57 | Edge Полная поддержка 79 | Firefox Полная поддержка 52 | IE Нет поддержки Нет | Opera Полная поддержка 44 | Safari Нет поддержки Нет | WebView Android Полная поддержка 57 | Chrome Android Полная поддержка 57 | Firefox Android Полная поддержка 52 | Opera Android Полная поддержка 43 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 7.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Смотрите замечания реализации.
- Смотрите замечания реализации.
Смотрите также
:only-child — Веб-технологии для разработчиков
Описание
CSS псевдокласс :only-child находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.
Синтаксис
parent child:only-child {
property: value;
}
Примеры
Простой пример
span:only-child {
color: red;
}
<div> <span>Этот span единственный ребёнок своего папы:(</span> </div> <div> <span>Этот span один из потомков родителя</span> <span>Этот span один из детей отца</span> </div>
Результат
Пример со списком
li li {
list-style-type: disc;
}
li:only-child {
color: #6699ff;
font-style: italic;
list-style-type: square;
}<ol>
<li>Первый
<ul>
<li>Это единственный ребёнок
</ul>
</li>
<li>Второй
<ul>
<li>Этот список с двумя элементами
<li>Этот список с двумя элементами
</ul>
</li>
<li>Третий
<ul>
<li>Этот список с тремя элементами
<li>Этот список с тремя элементами
<li>Этот список с тремя элементами
</ul>
</li>
<ol>
Результат
Спецификации
Поддержка браузерами
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
:only-child | Chrome Полная поддержка 2 | Edge Полная поддержка 12 | Firefox Полная поддержка 1.5 | IE Полная поддержка 9 | Opera Полная поддержка 9.5 | Safari Полная поддержка 3.1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 3.1 | Samsung Internet Android Полная поддержка 1.0 |
| Matches elements with no parent | Chrome Полная поддержка 57 | Edge Полная поддержка 79 | Firefox Полная поддержка 52 | IE Нет поддержки Нет | Opera Полная поддержка 44 | Safari Нет поддержки Нет | WebView Android Полная поддержка 57 | Chrome Android Полная поддержка 57 | Firefox Android Полная поддержка 52 | Opera Android Полная поддержка 43 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 7.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
Родственные селекторы | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 5.0+ | 9.2+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h2~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h2>. При этом <h2> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.
Здесь красный цвет текста будет установлен для всех абзацев.
h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<p>Абзац 2</p>Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h2> и <p> не имеют общего родителя.
h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<div><p>Абзац 2</p></div>
<p>Абзац 3</p>Синтаксис
E ~ F { Описание правил стиля }
Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует сразу после него.
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE htm>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы</title>
<style>
img {
display: none;
}
#switch:checked ~ img {
display: block;
}
</style>
</head>
<body>
<form>
<input type="checkbox">
<label for="switch">Показать картинки</label>
<img src="images/thumb1.jpg" alt="">
<img src="images/thumb2.jpg" alt="">
<img src="images/thumb3.jpg" alt="">
</form>
</body>
</html>В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку.
:nth-last-child — Веб-технологии для разработчиков
Описание
CSS псевдокласс :nth-last-child(an+b) находит элемент, имеющий an+b-1 потомков после данной позиции в дереве документа, значение для n может быть положительным или нулевым, а также имеющий родительский элемент.
В результате, он функционирует так же, как и :nth-child, кроме того, что выбирает элементы, считая в обратном порядке, с конца списка потомков, не с начала.
Смотрите :nth-child для более тщательного описания синтаксиса его аргументов.
Синтаксис
element:nth-last-child(an + b) {стили }
Примеры
Пример селекторов
tr:nth-last-child(-n+4)- Находит последние 4 строки HTML таблицы.
span:nth-last-child(even)- Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.
Использование
Этот CSS …
table {
border: 1px solid blue;
}
tr:nth-last-child(-n+3) { /* последние 3 потомка */
background-color: lime;
}
… с этим HTML …
<table>
<tbody>
<tr>
<td>Первая</td>
</tr>
<tr>
<td>Вторая строка</td>
</tr>
<tr>
<td>Третья</td>
</tr>
<tr>
<td>Четвёртая</td>
</tr>
<tr>
<td>Пятая строчка</td>
</tr>
</tbody>
</table>
… будет выглядеть, как :
Спецификации
Поддержка браузерами
| Возможность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Базовая поддержка | 4.0 | 3.5 (1.9.1) | 9.0 | 9.5 | 3.2 |
| Возможность | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Базовая поддержка | 2.1 | 1.0 (1.9.1) | 9.0 | 10.0 | 3.2 |
Смотрите также
Дочерние селекторы | CSS | WebReference
Дочерним называется элементом, который находится внутри родительского элемента. Какой элемент выступает родителем, а какой его потомком легко определить с помощью элементов дерева — так называется структура отношений элементов документа между собой (рис. 1).
Рис. 1. Дерево элементов
На рис. 1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к
.Вместе с тем не является дочерним для элемента . Стиль применяемого к элементу F, только когда он является дочерним элементом E. В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.Результат показан на рис. 2. Рис. 2. Использование дочерних селекторов Браузер Internet Explorer 7 не применяет стиль, если между селекторами в комментариях (li> / * больше * / a). Каждая спецификация проходит несколько стадий одобрения. В таблице браузеров используются следующие обозначения. Число указывает версию, начиная с свойства, имеющего свойство. Автор: Влад Мержевич Последнее изменение: 30.08.2017 Редакторы: Влад Мержевич CSS псевдокласс Псевдокласс где где где где где Элементы 1, 3, 5 и 7 будут выбраны. Элементы 1, 5 и 7 будут выбраны. Элементы 1, 4, 6 и 8 будут выбраны. , который является первым номером
среди своих братьев и сестер * /
p: first-child {
цвет: салатовый;
} Примечание : Как изначально определено, выбранный элемент должен иметь родителя. Начиная с Селекторов 4 уровня, это больше не требуется. Этот текст выделен! Этот текст не выбран. Этот текст не выбран. CSS псевдокласс Синтаксис
E> F {Описание} Обозначения
Пример Описание <тип> Указывает тип значения. <размер> A && B Значения должны выводиться в указанном порядке. <размер> && <цвет> A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). нормальный | малые шапки A || B Каждое Сообщение заведомо самостоятельно или с другими в произвольном порядке. ширина || count [] Группирует значения. [урожай || крест] * Повторять ноль или больше раз. [, <время>] * + Повторять один или больше раз. <число> + ? Указанный тип, слово или группа не является обязательным. вставка? {A, B} Повторять не менее A, но не более B раз. <радиус> {1,4} # Повторять один или больше раз через запятую. <время> # Пример
Примечание
Спецификация
Браузеры
Автор и редакторы
: nth-child — Веб-технологии для разработчиков
: nth-child () находит один или более элементов, защищает их позиции среди группы соседних элементов. / * Выбирает каждый четвёртый элемент
среди любой группы соседних элементов * /
: nth-child (4n) {
цвет: салатовый;
}
Синтаксис
nth-child указывается с единственным аргументом, описывающим паттерн для выбирания элементов. Ключевые слова
нечет четные Функциональная запись
An + B (для каждого целого числа n> = 0).Нумерация элементов начинается с единицы. Значения A и B должны быть <целое число> с. Формальный синтаксис
: nth-child (
<выбор-составных-соединений> = [<выбор-типов>?
<модификатор-атрибута> = i | с Примеры
Примеры селекторов
tr: nth-child (нечетное) или tr: nth-child (2n + 1) tr: nth-child (четное) или tr: nth-child (2n) : nth-ребенок (7) : nth-ребенок (5n) : nth-ребенок (3n + 4) : nth-ребенок (-n + 3) p: nth-child (n) p . p: nth-child (1) или p: nth-child (0n + 1) : первенец . Подробный пример
HTML
span: nth-child (2n + 1) , БЕЗ элемента
& lt; em & gt; в группе элементов-потомков.
span: nth-child (2n + 1) , С Система
& lt; em & gt; в группе элементов-потомков.
3 используется в подсчёте, потому что это элемент-потомок,
но он не выбран, потому что он не & lt; span & gt; .
span: nth-of-type (2n + 1) , С Блок
& lt; em & gt; в группе элементов-потомков.
3 не используется в подсчёте и не выбрано, потому что это & lt; em & gt; ,
но не & lt; span & gt; , а nth-of-type выбирает только
потомков этого типа. Элемент & lt; em & gt; полностью пропускается и игнорируется. CSS
html {
семейство шрифтов: без засечек;
}
пролет
div em {
отступ: 5 пикселей;
граница: сплошной зеленый 1px;
дисплей: встроенный блок;
нижнее поле: 3 пикселя;
}
.первый диапазон: n-й ребенок (2n + 1),
. второй диапазон: n-й ребенок (2n + 1)
.third span: nth-of-type (2n + 1) {
цвет фона: салатовый;
} Результат
Спецификации
Поддержка браузерами
Обновите данные о совместимости на GitHub Компьютеры Мобильные Chrome Edge Firefox Internet Explorer Opera Safari Android для браузера Android 9019 Chrome для Android 9019 Chrome для Android 9019 Chrome для Android 9018 для Android Opera для Android Safari на iOS Samsung Internet : nth-child () Chrome Полная поддержка 1 Кромка Полная поддержка 12 Firefox Полная поддержка 3.5 IE Полная поддержка 9 Опера Полная поддержка 9,5 : nth-child () . Safari Полная поддержка 3.1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10,1 : nth-child () . Safari iOS Полная поддержка 3.1 Samsung Интернет Android Полная поддержка 1.0 Соответствует элементам без родительского элемента Хром Полная поддержка 57 Кромка Полная поддержка 79 Firefox Полная поддержка 52 IE Нет поддержки Нет Opera Полная поддержка 44 Safari Нет поддержки Нет WebView Android Полная поддержка 57 Chrome Android Полная поддержка 57 Firefox Android Полная поддержка 52 Опера Android Полная поддержка 43 Safari iOS Нет поддержки Нет Samsung Internet Android Полная поддержка 7.0 из синтаксис Chrome Нет поддержки Нет Edge Нет поддержки Нет Firefox Нет поддержки Нет IE Нет поддержки Нет Opera Нет поддержки Нет Safari Полная поддержка 9 WebView Android Нет поддержки Нет Chrome Android Нет поддержки Нет Firefox Android Нет поддержки Нет Опера Android Нет поддержки Нет Safari iOS Полная поддержка 9 Samsung Internet Android Нет поддержки Нет Легенда
См. также
.: первенец — Веб-технологии для разработчиков
css псевдо-класс : первенец находит любой элемент, являющийся первым в своём родителе.>
/ * Выбирает любой
Синтаксис
: первенец
Примеры
Простой пример
HTML
Этот текст не выделен: это не `p`.
CSS
p: first-child {
цвет: салатовый;
цвет фона: черный;
отступ: 5 пикселей;
}
Результат
Стилизация списка
. HTML
CSS
ul li {
цвет синий;
}
ul li: first-child {
красный цвет;
font-weight: жирный;
} Результат
Спецификации
браузерами
Обновите данные совместимости на GitHub Компьютеры Мобильные Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet : первый ребенок Chrome Полная поддержка 4 Кромка Полная поддержка 12 Firefox Полная поддержка 3 IE Полная поддержка 7 : первый ребенок , когда элементы добавляются динамически.: first-child не применяется, пока ссылка не потеряет фокус. Opera Полная поддержка 9,5 Safari Полная поддержка 3.1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 4 Samsung Интернет Android Полная поддержка 1.0 Соответствует элементам без родительского элемента Хром Полная поддержка 57 Край Полная поддержка 79 Firefox Полная поддержка 52 IE Нет поддержки Нет Opera Полная поддержка 44 Safari Нет поддержки Нет WebView Android Полная поддержка 57 Chrome Android Полная поддержка 57 Firefox Android Полная поддержка 52 Опера Android Полная поддержка 43 Safari iOS Нет поддержки Нет Samsung Internet Android Полная поддержка 7.0 Легенда
Смотрите также
.: only-child — Веб-технологии для разработчиков
Описание
: единственный ребенок находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и : first-child: last-child или : nth-child (1): nth-last-child (1) , но с специфичностью. Синтаксис
parent child: only-child {
стоимость имущества;
}
Примеры
Простой пример
span: only-child {
красный цвет;
}
Результат
Пример со списком
li li {
тип-список: диск;
}
li: only-child {
цвет: # 6699ff;
стиль шрифта: курсив;
тип-стиль-список: квадрат;
}
Результат
Спецификации
Поддержка браузерами
Обновите данные о совместимости на GitHub Компьютеры Мобильные Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet : только ребенок Chrome Полная поддержка 2 Кромка Полная поддержка 12 Firefox Полная поддержка 1.5 IE Полная поддержка 9 Опера Полная поддержка 9,5 Safari Полная поддержка 3.1 WebView Android Полная поддержка ≤37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 3.1 Samsung Интернет Android Полная поддержка 1.0 Соответствует элементам без родительского Хром Полная поддержка 57 Кромка Полная поддержка 79 Firefox Полная поддержка 52 IE Нет поддержки Нет Opera Полная поддержка 44 Safari Нет поддержки Нет WebView Android Полная поддержка 57 Chrome Android Полная поддержка 57 Firefox Android Полная поддержка 52 Опера Android Полная поддержка 43 Safari iOS Нет поддержки Нет Samsung Internet Android Полная поддержка 7.0 Легенда
.
