Найти в Дзене

`:only-child

`:only-child` Иногда возникает необходимость изменить стиль элемента, если у него нет соседних элементов, и это очень просто сделать с помощью псевдокласса :only-child. Это может быть удобно при работе с динамическим контентом, когда необходимо изменить внешний вид, если есть только один дочерний элемент, или если есть что-то вроде <figure>, где необходимо придать элементу разный стиль в зависимости от того, есть или нет <figcaption>. figure { border-radius: 16px; padding: 4px; border: 1px solid black; } figure > img { border-radius: 12px 12px 0 0; } figure > figcaption { padding: 6px; border-radius: 0 0 12px 12px; } figure > img:only-child { border-radius: 12px; } Также можно сделать обратное, с помощью :not(:only-child). Недавно я обнаружил, что сочетание с :has() может быть очень удобным, когда необходимо проверить, есть ли у элемента только один дочерний элемент: /* Карточки с одним элементом получают больший padding */ .card:has(> :only-child) { padding: 2rem; } /* Карты

`:only-child`

Иногда возникает необходимость изменить стиль элемента, если у него нет соседних элементов, и это очень просто сделать с помощью псевдокласса :only-child.

Это может быть удобно при работе с динамическим контентом, когда необходимо изменить внешний вид, если есть только один дочерний элемент, или если есть что-то вроде <figure>, где необходимо придать элементу разный стиль в зависимости от того, есть или нет <figcaption>.

figure {

border-radius: 16px;

padding: 4px;

border: 1px solid black;

}

figure > img {

border-radius: 12px 12px 0 0;

}

figure > figcaption {

padding: 6px;

border-radius: 0 0 12px 12px;

}

figure > img:only-child {

border-radius: 12px;

}

Также можно сделать обратное, с помощью :not(:only-child).

Недавно я обнаружил, что сочетание с :has() может быть очень удобным, когда необходимо проверить, есть ли у элемента только один дочерний элемент:

/* Карточки с одним элементом получают больший padding */

.card:has(> :only-child) {

padding: 2rem;

}

/* Карты с несколькими дочерними элементами сохраняют стандартный padding */

.card {

padding: 1rem;

}

📱 @dev-notes.ru

#Frontend #CSS