:only-of-type

    0
    47

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

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

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

    :only-of-type похож на :only-child, отличается тем, что :only-child выбирает элемент, только если у родителя нету других элементов любого типа. Более подробно по ссылке: :only-child.

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

    Примеры

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

    Живой пример

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

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

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

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

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

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