Css первый элемент. Как работает CSS-селектор nth-child

), то стиль p:first-child уже не будет отображаться, поскольку

Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу

Лишь тогда, когда он будет являться последним дочерним элементом своего родителя . Добавьте после

Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега

(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Пример использования:first-of-type, :last-of-type, :nth-of-type и:only-of-type

/* CSS */ p:first-of-type { color: violet; text-transform: uppercase; } p:last-of-type { font-style: italic; font-size: 0.8em; } p:nth-of-type(3) { color: red; } p:nth-of-type(odd) { background-color: #A2DED0; } p:nth-of-type(even) { background-color: #C8F7C5; } h3:only-of-type { text-decoration: underline; }
Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type .

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p . Как видно из HTML-кода, после последнего тега

Есть еще и тег

, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с:last-of-child).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу

Который является третьим по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу

Который по факту является пятым ребенком тега

. Но если не брать во внимание элементы других типов, то получается, что тег

С красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h3:only-of-type – применяется к содержимому тега

, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег

является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег

, стиль не будет применён.

Выводы

Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.

С помощью дополнительных псевдоклассов:first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.

Псевдоклассы:first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.

Псевдокласс first-child в CSS используется для выбора первого элемента в контейнере. При этом конкретный тип элемента не учитывается, значение имеет лишь его позиция относительно родителя. Существуют некоторые тонкости в работе этого селектора, которые необходимо понимать для правильного использования.

CSS-псевдоклассы

Наряду с идентификаторами, классами, тегами и атрибутами псевдоклассы являются одним из видов CSS-селекторов. Их особенность в том, что они не могут быть установлены непосредственно в HTML.

Примерами псевдоклассов являются "первая строка в контейнере", "первая буква в слове", "первый дочерний элемент у родителя". Браузер может обнаружить подобные элементы только после того, как он проанализировал страницу и составил DOM-дерево, а в ряде случаев только после отрисовки.

Наличие в CSS подобного механизма позволяет определять оформление, не привязанное к HTML-коду, что открывает большие возможности для дизайна.

Выбор первого элемента

Псевдокласс first-child в CSS отвечает за выбор самого первого элемента в родительском контейнере. Текстовые узлы при этом игнорируются, в счет идут только полноценные теги.

Найдем первые элементы в двух простых HTML-структурах.

• Первый пункт
• Второй пункт
• Третий пункт

Есть только два способа прожить жизнь. Первый - будто чудес не существует. Второй - будто кругом одни чудеса. Альберт Эйнштейн

В результате выбраны будут первый пункт списка и тег, определяющий жирное начертание шрифта.

Первый пункт

два способа

Синтаксис

Все псевдоклассы в CSS определяются по определенному шаблону. Сначала указывается основной селектор, затем искомый псевдокласс, отделенный двоеточием.

B:first-child { text-decoration: underline; }

Такое правило подчеркнет текст первого элемента b внутри каждого контейнера.

• Все хотят изменить мир сам. Лев Толстой
• Тот, кто умеет, тот делает, кто не умеет - тот учит других. Бернард Шоу

На скриншоте очевидно, что выделились только элементы, соответствующие одновременно селектору тега b и селектору псевдокласса:first-child. Стиль был применен внутри каждого контейнера, в данном случае внутри всех пунктов списка.

Помимо тега, в качестве основного можно использовать любой другой селектор CSS, например:

Class:first-child {} :first-child {} *:first-child {}

Типичные ошибки

Псевдокласс первого элемента first-child в CSS выбирает строго тег, находящийся на первом месте в родительском контейнере. Даже если элемент полностью соответствует селектору, но не является первым потомком, он не будет выбран.

Для примера возьмем предыдущий список цитат и перенесем авторов в начало.

• Лев Толстой Все хотят изменить мир, но никто не хочет измениться сам.
• Бернард Шоу Тот, кто умеет, тот делает, кто не умеет - тот учит других.

Несмотря на то что селектор элемента остался прежним, CSS-стиль не применился, так как первым элементом в контейнере теперь является i.

Еще одной ошибкой является игнорирование Это такой же HTML-элемент, как и прочие. Если он окажется в контейнере перед искомым блоком, то селектор CSS first-child не сработает.

Учет типа элемента

Чтобы избежать подобных ситуаций, можно использовать псевдокласс first-of-type. Он работает так же, как селектор CSS first-child, но учитывает тип элемента.

B:first-of-type { text-decoration: underline; }

Теперь при подсчете учитываются только элементы, соответствующие селектору b.

Выбор последнего элемента

Существует также псевдокласс last-child, который работает аналогично селектору CSS first-child, но начинает счет элементов с конца контейнера.

Не нашли ответ на свой вопрос? Посмотрите здесь

Чёрный майнинг: как зарабатывают деньги через чужие компьютеры Скрипт майнинга криптовалюты как его удалить

Picodi: Все скидки в одном месте

Как открыть BIOS на ноутбуке