CSS :only-child selector
This CSS tutorial explains how to use the CSS selector called :only-child with syntax and examples.
Description
The CSS :only-child selector allows you to target an element that is the only child element within its parent.
Syntax
The syntax for :only-child CSS selector is:
Parameters or Arguments
element The only child of that type of element within its parent. style_properties The CSS styles to apply to the only child element.
Note
- The :only-child selector is a pseudo-class that allows you to target an element that is the only child element within its parent.
- See also :first-child, :last-child, :nth-child, and :nth-last-child selectors.
Browser Compatibility
The CSS :only-child selector has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer 9+ (IE 9+)
- IE Phone 9+
- Opera 9.5+
- Opera Mobile 10+
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the :only-child selector below, exploring examples of how to use this selector in CSS to apply styling to the only child element.
With tag
Let’s look at a CSS :only-child example where we apply the :only-child selector to a tag.
The CSS would look like this:
The HTML would look like this:
Here are 2 sites techonthenet.com and checkyourmath.com.
Here is only 1 site bigactivities.com.
The result would look like this (The :only-child selector would style the tags as follows):
In this CSS :only-child example, the first
tag contains more than one tag, so those tags are not styled by the :only-child selector. The second
tag contains only one tag, so it will be styled by the :only-child selector. The color of the text within that span tag bigactivities.com will be displayed as large red font.
With
tag
Let’s look at a CSS :only-child example where we apply the :only-child selector to a
tag.
The CSS would look like this:
The HTML would look like this:
TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003. We focus on technologies such as Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle/PLSQL, MySQL, HTML, CSS, and the C Language.
The information presented here is suitable for all programmers from beginner to expert.
We hope you find this information useful and return to our site, as we expand our information base.
The result would look like this (The :only_child selector would style the
tags as follows):
In this CSS :only-child example, the first tag contains only one
tag so it will be styled by the :only-child selector making the background color within
This is the only paragraph in this div
display as yellow. The second tag contains more than one
tag, so those
tags are not styled by the :only-child selector.
Псевдоклассы группы child
Группа этих псевдоклассов позволяет выбирать элементы не по классу или тегу, а по порядковому номеру.
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.
Пример
Скопировать ссылку «Пример» Скопировано
Раскрасим в разные цвета фон у пунктов списка. Обратите внимание, что у всех пунктов списка одинаковые классы, а значит, мы не сможем обратиться к отдельным пунктам при помощи селектора по классу.
У всех пунктов списка будет синий фон:
.list-item background-color: #2E9AFF;>.list-item background-color: #2E9AFF; >
У первого пункта списка (первого дочернего элемента) будет тёмно-зелёный фон:
.list-item:first-child background-color: #286C2D;>.list-item:first-child background-color: #286C2D; >
У последнего пункта списка (последнего дочернего элемента) будет оранжевый фон:
.list-item:last-child background-color: #FF8630;>.list-item:last-child background-color: #FF8630; >
У второго пункта списка будет зелёный фон:
.list-item:nth-child(2) background-color: #41E847;>.list-item:nth-child(2) background-color: #41E847; >
У предпоследнего пункта списка будет розовый фон:
.list-item:nth-last-child(2) background-color: #F498AD;>.list-item:nth-last-child(2) background-color: #F498AD; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Есть три суперпростых по своей логике работы псевдокласса из этого набора:
- :only — child — выбирает любой элемент, который является единственным дочерним элементом своего родителя. Можно имитировать аналогичное поведение следующими комбинациями: :first — child : last — child или :nth — child ( 1 ) : nth — last — child ( 1 ) , но зачем так сложно, если можно проще?
- :first — child — выбирает первый дочерний элемент в родителе.
- :last — child — выбирает последний дочерний элемент в родителе.
Псевдоклассы, несущие в себе сочетание букв nth , работают гораздо интереснее. Для их правильной работы нужно указать в скобках паттерн, по которому будут выбираться дочерние элементы.
Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:
- :nth — child ( odd ) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
- :nth — child ( even ) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.
В круглых скобках мы можем указать просто цифру. Таким образом будет выбран соответствующий этой цифре дочерний элемент. Например, :nth — child ( 3 ) выберет третий дочерний элемент, подходящий под левую часть селектора.
Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу :nth — child ( 3n ) . Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.
Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth — child ( 6n+10 ) .
Псевдокласс :nth — last — child работает абсолютно аналогично, только счёт ведётся с конца.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Часто начинающие разработчики пытаются применить эти псевдоклассы к родительскому элементу. Но тут необходимо просто запомнить, что нужно применять псевдоклассы именно к дочерним элементам, из списка которых надо выбрать. При расчёте порядкового номера дочернего элемента учитываются все соседние дочерние элементы, находящиеся на одном уровне с элементом, к которому мы применяем псевдокласс :nth — child , вне зависимости от класса и типа элемента.
💡 Не надо стесняться пользоваться калькулятором NTH. Часто не получается сразу в уме составить правильную формулу.
:only-child и :only-of-type
Псевдокласс :only-child выбирает дочерний элемент, только если он является единственным у своего родителя. В примере 1 зелёным цветом выделяется текст внутри первого , поскольку он содержит лишь один элемент . Второй содержит уже два элемента ( и
) и :only-child не срабатывает.
Пример 1. Использование :only-child
Селектор p:only-child находит элемент только при соблюдении двух условий: это единственный дочерний элемент и это элемент
. В примере 1 таких комбинаций нет — первый содержит единственный дочерний элемент, но это не
, а ; второй содержит два элемента и
не является единственным.
Псевдокласс :only-of-type выбирает дочерний элемент определённого типа, только если он является единственным у своего родителя. В примере 2 зелёным цветом будут выделены все , поскольку внутри они встречаются один раз. При этом наличие других элементов, вроде
, не учитывается.
Пример 2. Использование :only-of-type
Таким образом, p:only-child находит только единственный элемент и только если это
, а p:only-of-type находит элемент
и смотрит, является ли этот
единственным.
:only-child и :only-of-type находят применение при создании различных меню. На рис. 1 показано ниспадающее меню: при наведении на пункты меню раскрывается подменю со ссылками. Не все пункты являются раскрывающими и чтобы пользователь не путался, к раскрывающимся пунктам добавлена стрелочка.
- , а для отображения и сокрытия пунктов используется псевдокласс :hover и свойство display. Псевдокласс :only-child убирает стрелочку для единственного элемент внутри списка, т. е. для пункта, в котором подменю нет (пример 3).
Пример 3. Ниспадающее меню
См. также
Псевдокласс :only-child
Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у родителя.
В качестве примера рассмотрим следующий код HTML:
Роль цитокинов при дорсалгии
Автор: Гордон Фримен, канд. физ.-мат. наук
Содержание статьи
Почта: freemen@blackmesa.com Опубликовано:
Псевдокласс :only-child без указания селектора выберет все единственные элементы и установит для них красный цвет текста. Здесь это будет элемент , поскольку он является единственным дочерним элементом у своего родителя
.
При добавлении селектора к :only-child сперва рассматриваются все единственные дочерние элементы у своих родителей, затем проверяется, относятся ли они к указанному типу. Если эти два условия совпадают (в данном случае единственный элемент и элемент ), тогда заголовок окрасится красным цветом. Поскольку не является единственным и кроме него есть другие элементы (
и ), то ничего выбрано не будет.
Вместо :only-child можно использовать комбинации :first-child:last-child или :nth-child(1):nth-last-child(1) .
Синтаксис
Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Примечание
В Safari до версии 3.0 псевдокласс :only-child воспринимается как :first-child .
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.