MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

: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>

Результат

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

Спецификация Статус Комментарий
Selectors Level 4
Определение ':only-child' в этой спецификации.
Рабочий черновик Без изменений
Selectors Level 3
Определение ':only-child' в этой спецификации.
Рекомендация Изначальное определение

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 2 1.5 (1.8) 9 9.5 3.1
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 2.1 1.0 (1.8) 9 10.0 3.1

 

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: BychekRU
 Обновлялась последний раз: BychekRU,