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

:only-child

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

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

Описание

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<article>
  <h1>Роль цитокинов при дорсалгии</h1>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: freemen@blackmesa.com</address>
  <p>
    Опубликовано:
    <time datetime="2018-11-27">27 ноября 2018</time>
  </p>
</article>

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

1
2
3
article :only-child {
  color: red;
}

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

1
2
3
article h1:only-child {
  color: red;
}

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

Примеры

Пример 1

1
2
3
4
5
6
7
8
<div>
  <span>Этот span единственный ребёнок своего папы:(</span>
</div>

<div>
  <span>Этот span один из потомков родителя</span>
  <span>Этот span один из детей отца</span>
</div>

1
2
3
span:only-child {
  color: red;
}

only-child

Пример 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>

1
2
3
4
5
6
7
8
li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}

only-child

См. также

Ссылки

Комментарии