:only-child

    0
    58

    :only-child — CSS псевдокласс, который выбирает элемент, только если он единственный у родителя. То есть, элемент выбран, только если его родитель не имеет других дочерних элементов любого типа.

    Например, li:only-child выберет элемент списка если он единственный в списке. p:only-child выберет параграф если он единственный внутри контейнера. Таким образом, p:only-child выберет этот параграф:

    А в нижеприведенном случае псевдокласс не выберет ничего, т.к. параграф не является единственным элементом:

    Тонкости & Особенности

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

    Как и другие псевдоклассы :only-child можете работать совместно с другими селекторами, такими как: :hover или псевдоэлементом ::after. Например, следующее правило применит hover стили к элементам заданным :only-child:

    Примеры

    Варианты использования :only-child:

    Живой пример

    В следующем примере продемонстрирована работа псевдокласса :only-child, который выбирает единственный элемент своего родителя для стилизации.

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

    Селектор :only-child поддерживается в Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, на Android и iOS.

    ПОДЕЛИТЬСЯ
    Предыдущая статья:nth-of-type()
    Следующая статья:only-of-type
    Постоянный автор на exabyte.ws. Специализируюсь на Wordpress, Javascript & jQ, REST API. Любые вопросы связанные с Web разработкой вы можете задать лично или в группе вконтакте.

    ОСТАВЬТЕ ОТВЕТ

    Пожалуйста оставьте комментарий!
    Введите ваше имя