:first-of-type

    0
    86

    Псевдокласс :first-of-type выбирает элемент, который является первым дочерним элементом своего типа.

    К примеру, следующие правила стилей сработают на первом параграфе внутри .container

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

    :first-of-type похож на псевдокласс :first-child, отличие в том, что первый является более конкретным чем второй. На примере вышеприведенного кода, :first-of-type выбирает именно первое вхождение параграфа внутри <article>. :first-child сработает только в том случае, если элемент является первым дочерним элементом вне зависимости от типа. Таким образом:

    не сработает на примере выше, т.к. параграф не является первым дочерним элементом. Вы можете прочитать про этот псевдокласс в статье про :first-child.

    Как и другие селекторы, :first-of-type может объединятся с другими псевдоселекторами, например, :hover. Смотрите пример ниже.

    Пример

    Предположим, у Вас есть следующий код:

    Следующее правило CSS выберет первый <article> в блоке .container

    Следующее правило CSS выберет первые вхождения параграфов в каждом родителе

    Следующие правила CSS выберут все первые ссылки внутри родительских элементов и выведут на экран url ссылки этих элементов рядом в скобках

    Демонстрация

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

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

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

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

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