:only-child: особое оформление единственного элемента
Only-child совпадает с элементом, у которого нет соседних элементов в том же родителе. Он подходит для небольших изменений раскладки, когда группа содержит ровно один блок.
Назначение
Only-child совпадает с элементом, у которого нет соседних элементов в том же родителе. Он подходит для небольших изменений раскладки, когда группа содержит ровно один блок.
Как это работает
Считаются элементы, а не текстовые узлы. Для контейнера с одним элементом и обычным текстом совпадение сохраняется. Это не проверка числа всех узлов и не поиск единственного элемента указанного типа.
Пример
<style>.single-demo{display:flex;gap:1rem}.single-demo>article{padding:1rem;border:1px solid #9abbab}.single-demo>article:only-child{flex:1;background:#e5f2e9}</style>
<div class="single-demo"><article><h3>Один урок</h3><p>Карточка занимает доступную ширину.</p></article></div>Что должно получиться
Единственная карточка получает дополнительный фон и растягивается. Если рядом добавить второй article, правило only-child перестанет действовать на обе карточки.
Граница применения и частая ошибка
Only-child не учитывает визуальную видимость соседей. Добавление скрытого служебного span способно изменить результат. Если нужны правила по числу карточек конкретного класса, сначала уточните структуру или используйте явно рассчитанное состояние.
Самостоятельная проверка
Добавьте рядом текст без обёртки и проверьте совпадение, затем оберните его в span. Сравните результаты. Решите, устойчиво ли такое правило для вашего компонента с возможными служебными элементами.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.