Перейти к содержанию

:only-child

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

Описание

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

<article>
  <h1>Роль цитокинов при дорсалгии</h1>
  <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 сперва рассматриваются все единственные дочерние элементы у своих родителей, затем проверяется, относятся ли они к указанному типу. Если эти два условия совпадают (в данном случае единственный элемент и элемент <h1>), тогда заголовок окрасится красным цветом. Поскольку <h1> не является единственным и кроме него есть другие элементы (<p> и <address>), то ничего выбрано не будет.

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

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

Примеры

Пример 1

```html tab="HTML"

Этот span единственный ребёнок своего папы:(

Этот span один из потомков родителя Этот span один из детей отца
```css tab="CSS"
span:only-child {
  color: red;
}

Результат:

only-child

Пример 2

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

```html tab="HTML"

  1. Первый
    • Это единственный ребёнок
  2. Второй
    • Этот список с двумя элементами
    • Этот список с двумя элементами
  3. Третий
    • Этот список с тремя элементами
    • Этот список с тремя элементами
    • Этот список с тремя элементами
    ```css tab="CSS"
    li li {
      list-style-type: disc;
    }
    li:only-child {
      color: #6699ff;
      font-style: italic;
      list-style-type: square;
    }
    

    Результат

    only-child

    См. также

    Ссылки