Псевдокласс CSS :only-child
Используйте псевдокласс CSS :only-child для выбора и стилизации единственного дочернего элемента родителя.
Псевдокласс :only-child соответствует элементу, который является единственным дочерним у своего родителя — то есть элементу, не имеющему ни одного брата или сестры.
Элемент выбирается только в том случае, если его родитель не содержит других дочерних элементов. Псевдокласс :only-child функционально эквивалентен :first-child:last-child (быть одновременно первым и последним дочерним означает, что между ними ничего нет), и его специфичность составляет (0,2,0), поскольку он считается двумя псевдоклассами.
На этой странице описывается, что соответствует :only-child, чем он отличается от связанных селекторов, таких как :only-of-type, как использовать его в реальных макетах, и какие подводные камни могут вас подстерегать.
Когда использовать :only-child
:only-child наиболее полезен, когда вы хотите, чтобы элемент выглядел по-разному в зависимости от того, стоит ли он один или находится среди братских элементов. Типичные случаи:
- Списки с одним элементом. Стилизуйте список с единственным пунктом иначе (например, скройте маркер или уберите разделитель, который имеет смысл только при наличии нескольких элементов).
- Макеты с карточками или сетками. Одинокая карточка может быть центрирована или растянута, тогда как две и более переключаются на многоколоночный макет.
- Сгенерированное содержимое. Когда разметка создаётся CMS или шаблонным циклом, заранее неизвестно, сколько братских элементов появится;
:only-childпозволяет таблице стилей реагировать на это автоматически.
Отличие от :only-of-type
Это наиболее распространённый источник путаницы:
:only-child— соответствует только тогда, когда элемент является единственным дочерним у своего родителя, независимо от типа элемента. Если существует любой другой братский элемент, совпадения не будет.:only-of-type— соответствует, когда элемент является единственным элементом своего типа среди братских, даже если братские элементы других типов существуют.
<div>
<h2>Heading</h2>
<p>Only paragraph here</p>
</div>В приведённой разметке <p> не является :only-child (поскольку <h2> тоже является дочерним), но он является :only-of-type, потому что это единственный <p>.
Текстовое содержимое не учитывается
:only-child смотрит только на дочерние элементы — братские. Обычный текст вокруг элемента не мешает ему совпадать:
<p>Some text <strong>bold</strong> more text</p>Здесь <strong> по-прежнему соответствует strong:only-child, поскольку окружающие текстовые узлы не являются элементами. Пробелы и комментарии также игнорируются.
Версия
Синтаксис
Синтаксис CSS :only-child
:only-child {
css declarations;
}Пример селектора :only-child:
Пример :only-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:only-child {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<div>
<p>Lorem ipsum is simply dumnmy text.</p>
</div>
<div>
<p>Lorem ipsum is simply dummy text.</p>
<p>Lorem ipsum is simply dummy text.</p>
</div>
</body>
</html>Пример селектора :only-child для тега <li>:
Пример :only-child с тегом li
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul li {
list-style-type: square;
}
li:only-child {
color: blue;
list-style-type: disc;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<ol>
<li>
One element
<ul>
<li>This list has just one element.</li>
</ul>
</li>
<li>
Two elements
<ul>
<li>This list has two elements.</li>
<li>This list has two elements.</li>
</ul>
</li>
<li>
Three elements
<ul>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
</ul>
</li>
</ol>
</body>
</html>Пример селектора :only-child для тега <em>:
Пример :only-child с тегом em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
em:only-child {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<p>This is a <em>paragraph</em>.</p>
<p>This is a paragraph.</p>
</body>
</html>Пример селектора :only-child для тега <div>:
Пример :only-child для тега div
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:only-child {
color: #8ebf42;
font-weight: bold;
}
div {
display: block;
margin: 6px;
padding: 5px;
outline: 1px solid #1c87c9;
}
div div {
display: inline-block;
}
</style>
</head>
<body>
<h2>:only-child selector example</h2>
<div>
<div>I am an only child.</div>
</div>
<div>
<div>I am the 1st sibling.</div>
<div>I am the 2nd sibling.</div>
<div>
I am the 3rd sibling,
<div>but this is an only child.</div>
</div>
</div>
</body>
</html>Связанные селекторы
:only-of-type— единственный элемент своего типа среди братских.:first-childи:last-child— выбирают первый или последний дочерний элемент;:only-childэквивалентен комбинации обоих.:nth-child()— выбирает дочерние элементы по позиции с помощью формулы.