Css only child: :only-child — CSS: Cascading Style Sheets

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

• Содержание
  • Синтаксис
  • Примечание
  • Спецификация
  • Браузеры

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

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

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

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

article :only-child { color: red; }

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

article h2:only-child { color: red; }

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

Синтаксис

Селектор:only-child { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Примечание

В Safari до версии 3.0 псевдокласс :only-child воспринимается как :first-child.

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

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

9	12	2	9.5	3. 1	1.5

Браузеры

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

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

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

Псевдоклассы

См. также

• :only-child и :only-of-type
• Псевдокласс :only-of-type

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 03. 08.2018

Редакторы: Влад Мержевич

child | HTML и CSS с примерами кода

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

• :active
• :any-link
• :blank
• :checked
• :current()
• :default
• :defined
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :focus
• :focus-visible
• :focus-within
• :fullscreen
• :future
• :has()
• :host
• :host()
• :host-context()
• :hover
• :indeterminate
• :in-range
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :local-link
• :not()
• :nth-child()
• :nth-col()
• :nth-last-child()
• :nth-last-col()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :past
• :placeholder-shown
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :target-within
• :user-invalid
• :valid
• :visited
• :where()

Описание

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

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

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

article :only-child {
  color: red;
}

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

article h2:only-child {
  color: red;
}

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

Примеры

Пример 1

HTMLCSSРезультат

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

span:only-child {
  color: red;
}

Пример 2

Пример со списком

HTMLCSSРезультат

<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-of-type

Ссылки

• Псевдо-класс :only-child ^{MDN (рус.)}

: единственный ребенок | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

 div p:только дочерний {
  красный цвет;
} 

Например, если мы вкладываем абзацы в

 

  
Этот абзац является единственным потомком своего родителя

 
<дел>
  
Этот абзац является первым дочерним элементом своего родителя
  
Этот абзац является вторым дочерним элементом своего родителя

Теперь мы можем стилизовать только

нашего первого потомка

. Последующий

и его дочерние элементы никогда не будут стилизованы, поскольку родительский контейнер содержит более одного дочернего элемента (т. е. теги p).

 р: единственный ребенок {
  красный цвет;
} 

Мы также можем смешать дополнительные псевдоклассы, как в этом примере, который выбирает первый абзац в нашем вложенном div и единственный дочерний элемент div.contain .

 <дел>
  <дел>
    
Привет, мир
    
еще немного детей
  

 div.contain div: only-child: first-child {
  красный цвет;
} 

:only-child не будет работать как селектор, если ваш родительский элемент содержит более одного дочернего элемента с идентичным тегом. Например…

 

  <дел>
     
Дочерний раздел 1
 
    
абзац 2
    
абзац 3
  

  <дел>
     
Дочерний раздел 2
 
    
абзац 2
    
абзац 3
  

Дочерний раздел 3

абзац 2

абзац 3