:first-child

    0
    414

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

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

    Следующие правила стилей выберут и применят стили только к первому параграфу, т.к. он является первым дочерним элементом.

    Но эти правила не сработают при следующем HTML:

    В этом случае параграф не является первым дочерним элементом.

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

    Если вы хотите выбрать и стилизовать первый параграф в .container (код выше), когда он не является первым дочерним элементом, вы можете воспользоваться псевдоклассом :first-of-type, который выбирает первый элемент своего типа вне зависимости является ли он первым дочерним или нет. К примеру, p:first-of-type выберет первый параграф в примере выше, обойдя тег заголовка, который по факту, является первым дочерним элементом.

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

    Пример

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

    Следующее правило CSS выберет span, т.к. он является первым дочерним элементом параграфа.

    Следующее правило CSS выберет первый элемент неупорядоченного списка (HTML код выше):

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

    Следующие правила обернут span круглыми скобками с помощью ::before и ::after

    Пример работы смотрите в секции демонстрации.

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

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

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

    Примечание

    В Internet Explorer 7 не обновляются стили элемента, если он был добавлен динамически. В Internet Explorer 8, если элемент был вставлен динамически при нажатии на ссылку, стили не будут применены к элементу, пока ссылка не потеряет focus.

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

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

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