: only-child - CSS-хитрости | CSS Альманах 2024

Свойство :only-childселектора псевдокласса в CSS представляет элемент, который имеет родительский элемент и чей родительский элемент не имеет других дочерних элементов. Это будет то же самое, что :first-child:last-childили :nth-child(1):nth-last-child(1), но с меньшей специфичностью.

div p:only-child ( color: red; )

Например, если мы вложим абзацы в такой…


This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent

Теперь мы можем стилизовать единственный

нашего первого ребенка . Последующие и его дочерние элементы никогда не будут стилизованы, поскольку родительский контейнер содержит более одного дочернего элемента (т. Е. Теги p).

p:only-child ( color:red; )

Мы также могли бы смешать дополнительные псевдоклассы, подобные этому примеру, который выбирает первый абзац внутри нашего вложенного div и единственный дочерний элемент div.contain.


Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childне будет работать как селектор, если ваш родительский элемент содержит более одного дочернего элемента с идентичным тегом. Например…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

Это приведет к тому, что ни один из div не унаследует красный цвет, поскольку родительский элемент содержит более 1 дочернего элемента (3 безымянных div).

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.