Css if only one child

:only-child¶

Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у родителя.

Описание¶

В качестве примера рассмотрим следующий код HTML:

article> h1>Роль цитокинов при дорсалгииh1> p>Автор: Гордон Фримен, канд. физ.-мат. наукp> p>Содержание статьиp> address>Почта: [email protected]address> p> Опубликовано: time datetime="2018-11-27">27 ноября 2018time> p> article> 

Псевдокласс :only-child без указания селектора выберет все единственные элементы и установит для них красный цвет текста. Здесь единственным будет элемент , поскольку он является единственным дочерним элементом у своего родителя

.

article :only-child  color: red; > 

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

и ), то ничего выбрано не будет.

article h1:only-child  color: red; > 

Вместо :only-child можно использовать комбинации :first-child:last-child или :nth-child(1):nth-last-child(1) .

Примеры¶

Пример 1¶

div> span>Этот span единственный ребёнок своего папы:(span> div> div> span>Этот span один из потомков родителяspan> span>Этот span один из детей отцаspan> div> 

Пример 2¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

ol> li> Первый ul> li>Это единственный ребёнокli> ul> li> li> Второй ul> li>Этот список с двумя элементамиli> li>Этот список с двумя элементамиli> ul> li> li> Третий ul> li>Этот список с тремя элементамиli> li>Этот список с тремя элементамиli> li>Этот список с тремя элементамиli> ul> li> ol>ol> ol> 

li li  list-style-type: disc; > li:only-child  color: #6699ff; font-style: italic; list-style-type: square; > 

Источник

Псевдокласс :only-child

Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у родителя.

В качестве примера рассмотрим следующий код HTML:

 
Роль цитокинов при дорсалгии
 
Автор: Гордон Фримен, канд. физ.-мат. наук
 
Содержание статьи
 
Почта: freemen@blackmesa.com
 
Опубликовано: 27 ноября 2018
 

Псевдокласс :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 ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Источник

: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

CSS псевдокласс :only-child находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1) , но с меньшей специфичностью.

Синтаксис

Примеры

Простой пример

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> 

Результат

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

:only-child

The :only-child pseudo-class selector property in CSS represents an element that has a parent element and whose parent element has no other element children. This would be the same as :first-child:last-child or :nth-child(1):nth-last-child(1) , but with a lower specificity.

 
This paragraph is the only child of its parent
 
 
This paragraph is the first child of its parent
 
This paragraph is the second child of its parent
 

Now we can style the only

of our first child . The subsequent and it’s children will never be styled as the parent container holds more than one child (i.e. the p tags).

We could also mixin additional pseudo-classes like this example that selects the first paragraph within our nested div and the only-child of div.contain .

 
 
Hello World
 
some more children
 
 

div.contain div:only-child :first-child

:only-child won’t work as a selector if your parent element contains more than one child with an identical tag. For example…

 
 
Div Child 1
 
paragraph1
 
paragraph2
 
 
Div Child 2
 
paragraph1
 
paragraph2
 
 
Div Child 3
 
paragraph1
 
paragraph2
 
 

This will result in no divs inheriting the color red as the parent contains more than 1 child (the 3 unnamed divs).

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Источник