Only child css selector

: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

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

Источник

Псевдоклассы группы 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. Часто не получается сразу в уме составить правильную формулу.

Источник

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.

Источник

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

Браузеры

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

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

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

См. также

Источник