:only-child¶
Псевдокласс :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>
<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¶
<div>
<span>Этот span единственный ребёнок своего папы:(</span>
</div>
<div>
<span>Этот span один из потомков родителя</span>
<span>Этот span один из детей отца</span>
</div>
span:only-child {
color: red;
}
Пример 2¶
Пример со списком
<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-child
MDN (рус.)