Css псевдокласс :last-child

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Есть три суперпростых по своей логике работы псевдокласса из этого набора:

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

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

Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:

• :nth — child ( odd ) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
• :nth — child ( even ) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.

В круглых скобках мы можем указать просто цифру. Таким образом будет выбран соответствующий этой цифре дочерний элемент. Например, :nth — child ( 3 ) выберет третий дочерний элемент, подходящий под левую часть селектора.

Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу :nth — child ( 3n ) . Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.

Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth — child ( 6n+10 ) .

Псевдокласс :nth — last — child работает абсолютно аналогично, только счёт ведётся с конца.

Вложенные и соседние селекторы

Далее поговорим о вариациях, как можно проще задавать стили для различных элементов, не прибегая к использованию классов. Часто мы должны задать стили только для вложенных элементов. Допустим определенные стили ТОЛЬКО у ссылок меню или ТОЛЬКО у абзацей определенного блока, например, блока с контентом. Для этого используется понятие вложенных селекторов. Необходимо слева направо задать порядок вложенности.

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

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

Например, для селектора по классу .sec применется отступ сверху, если он стоит после элемента с классом .first:

Вложенные и соседние селекторы можно комбинировать. Если зададим в примере перед конструкцией .first + .sec класс .content, то свойства применяются для второго класса в случае, если он идет после первого и они оба лежат в блоке с классом .content.

Псевдокласс :last-child

Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

Псевдокласс :last-child без указания селектора выберет все последние элементы внутри и установит для них красный цвет текста. Здесь последними идут

и они и будут выбраны.

При добавлении селектора к :last-child сперва берётся последний элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это последний элемент и это элемент указанного типа. Здесь красным цветом будет выделен абзац, поскольку последним идёт именно

Если вместо p использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «последний элемент это ».

Для выбора последнего элемента определённого типа используйте псевдокласс :last-of-type.

Вместо :last-child допустимо использовать :nth-last-child(1).

Синтаксис

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.
*	Повторять ноль или больше раз.	*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Пример

Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего элемента , расположенного внутри контейнера с именем класса block . Это позволило создать цветную полосу внизу блока без включения новых классов.

Рис. 1. Результат использования псевдокласса :last-child

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Стили для дочерних селекторов. Чем дочерние элементы отличаются от потомков

С вложенностью селекторов мы познакомилимь. Понятно, что сначала идет родительский элемент (предок), а вложенные в него элементы являются потомками

При чем не важно, какой у них уровень вложенности, все равно для первого элемента они будут потомками. Чтобы задать стили для первого уровня вложенности, т.е

для непосредственного потомка, используют понятие дочернего селектора. Для этого используют символ >, он указывает на дочерний селектор.

В данном примере стили применяются только для элемента span вложенного непосредственно в .content, а для span внутри абзаца не применяются.

Псевдоселекторы, псевдоэлементы и псевдоклассы в CSS

Псевдоклассы — это селекторы, которые определяют элементы на странице не по классам, прописанным разработчиком, а по специфическому состоянию HTML-элементов. Например, когда на элемент страницы наводится курсор мыши, он переходит в специфическое состояние. Чтобы задать обычный стиль этому элементу, мы используем какой-нибудь основной селектор, а чтобы задать стиль при наведении курсора на него, мы используем псевдокласс. При описании стилей псевдокласса его селектор всегда начинается с «двоеточия»:

    :<имя псевдокласса> {

        <описываем стили>

    }

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

Псевдоклассы CSS, которые отвечают за действия пользователя

Псевдоклассы, которые «включаются» при определенных действиях пользователя:

«:hover». Этот псевдокласс используется, когда мы хотим задать стили элементу, на который навели курсор. В этом случае синтаксис селектора будет таким: « :hover».

«:focus»

Этот псевдокласс помогает задать стиль элементу, на котором сфокусировано внимание пользователя. Например, пользователь заполняет какую-то форму на сайте

В момент заполнения формы ее можно как-то выделить при помощи данного псевдокласса.

«:link» и «visited». Эти псевдоклассы применяются исключительно к ссылкам. Первый задает стили ссылке, которую еще не посетили, а второй — ссылке, которую уже посетили.

«:active». Этот псевдокласс используется в тот момент, когда пользователь активно взаимодействует с элементом страницы. Например, пользователь только нажал на ссылку или кнопку, но еще не отпустил их.

Псевдоклассы, которые определяют «соседство» html-элементов

Псевдоклассы, которые отвечают за расположение дочернего элемента в родительском, иногда называю псевдоклассами «соседства».

Псевдоклассы «соседства»:

1. «:first-child». Этот псевдокласс всегда определяет первый элемент собственного родителя. Например, у нас есть большой текст, и мы хотим выделить в нем стилями первый абзац. В этом случае мы к тексту применяем данный псевдокласс и описываем стили. Псевдокласс «привязывается» не к конкретному элементу, а лишь к его расположению. Например, в начале нашего текста добавляем новый абзац — теперь он будет попадать под действие этого псевдокласса.

2. «:last-child». Работает точно так же, как и первый псевдокласс, но только с последними дочерними элементами родителя.

3. «:only-child». Этот псевдокласс определяет все дочерние элементы родительского класса, при условии что они являются единственными у своего родителя.

4. «:nth-child(номер элемента)». Этот псевдокласс позволяет обратиться к конкретному номеру элемента своего родителя. Например, у вас на сайте реализован список, вы хотите выбрать конкретный пункт списка и выделить его стилями — тогда вам поможет данный псевдокласс.

Это не все псевдоклассы. Если в описанных выше псевдоклассах заменить слово «child» на «of-type», тогда мы получим серию псевдоклассов, которые будут определять дочерний элемент по его типу, а не место расположения. Например, у вас есть некий блок, внутри которого много разных элементов:

<section>

  <h2>…</h2>

  <p>…</p>

  <form>…</form>

  <h3>…</h3>

  <p>…</p>

  <p>…</p>

     </section>

Если прописать псевдокласс «p: first-child», тогда в этом случае ни один элемент не будет выбран, потому что первым дочерним элементом не является абзац. Но если прописать псевдокласс «p:first-of-type», тогда будет выбран «первый абзац», хотя фактически он является вторым дочерним элементом. В остальном «child» и «of-type» работают идентично. Но и на этом псевдоклассы не заканчиваются. Мы привели лишь те, которые наиболее часто применяются. 

Псевдоэлементы CSS

Псевдоэлементы работают по похожему принципу, как и псевдоклассы, однако они работают так, будто на странице добавлен новый элемент, а не применены стили к существующему элементу. Каждый псевдоэлемент обозначается с использованием 2-х двоеточий:

::<имя псевдоэлемента>

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

1. «::after». Определяет псевдоэлемент, который появится после существующего, родительским элементом.

2. «::before». Определяет псевдоэлемент, который появляется перед существующим, родительским элементом.

Эти два псевдоэлемента используются наиболее часто в таблицах стилей. Есть еще несколько, но они используются в специфичных случаях и крайне редко.

Псевдоклассы

Еще одно уточнение для задания стилей. Расширяет наши возможности и сужает область применения без использования дополнительных классов и конструкций. Псевдоклассы задаются через символ двоеточия. Перечислим часто используемые и кратко познакомимся с ними:

• first-child и last-child. Задает стили для первого и последнего дочернего элемента внутри родителя. Например, стили только для первого абзаца внутри контентной области.

• nth-of-type. Идея схожа с предыдущем псевдоклассом. Указывает на элеменет в зависимости его расположения внутри родителя. Только здесь еще точнее, может отметить не только первый и последний элементо, но и с любым порядковым номер. Синтаксис такой селектор:nth-child(значение). Значение может быть целочисленное или заданное с помощью формулы. Например, для всех четных абзацей можно использовать такую запись:

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

• :link, :visited и :active. Специальные псевдоклассы для работы со ссылками. С помощью них можно добавить стили непосещенных, посещенных и активных ссылок.
• :focus. Псевдокласс для элементов в фокусе, например для input куда мы на данный момент вводим значение.

Основные селекторы CSS

Селектор — это способ обратиться к элементу страницы. Каждый стиль в таблице пишется по такому шаблону:

    <имя селектора> {

    <описание стилей>

    }

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

Основные селекторы:

Универсальный селектор. Этот селектор обозначается звездочкой — «*». Это общий селектор. Если прописать под ним стили, то они будут применяться ко всем элементам страницы. 

«Имя тега». Этот тот случай, когда мы хотим применить определенный стиль к HTML-элементу. В качестве селектора могут выступать теги: «p», «div», «ul», «ol», «body», «form» и др. После обозначения селектора HTML-тегом стили применяются ко всем элементам страницы с таким тегом.

«Имя класса». Это уже более «узкий селектор». Класс элементу назначает сам разработчик в атрибутах HTML-элемента. Если прописать стили под именем класса, они будут применяться ко всем элементам, которым разработчик задал такой класс

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

Например, фотографии в галереи, миниатюры постов, абзацы, пункты меню и др.

«Имя идентификатора». Идентификатор служит еще более «узким» селектором. Он задается одному конкретному элементу. Все стили, прописанные под селектором-идентификатором, будут применяться только к одному элементу. На одной странице не может быть нескольких одинаковых идентификаторов.

С основными видами селекторов мы закончили. Переходим к псевдоселекторам.

Псевдокласс :last-child | WebReference

Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

Псевдокласс :last-child без указания селектора выберет все последние элементы внутри <article> и установит для них красный цвет текста. Здесь последними идут <p> и <time> они и будут выбраны.

article :last-child { color: red; }

При добавлении селектора к :last-child сперва берётся последний элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это последний элемент и это элемент указанного типа. Здесь красным цветом будет выделен абзац, поскольку последним идёт именно <p>.

article p:last-child { color: red; }

Если вместо p использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «последний элемент это <h2>».

article h2:last-child { color: red; }

Для выбора последнего элемента определённого типа используйте псевдокласс :last-of-type.

Вместо :last-child допустимо использовать :nth-last-child(1).

Селектор:last-child { ... }

	Описание

Пример
<тип>
Указывает тип значения.

<размер>

A && B
Значения должны выводиться в указанном порядке.
<размер> && <цвет>

A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps

A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.

width || count

Группирует значения.

*
Повторять ноль или больше раз.
*

+
Повторять один или больше раз.
<число>+

?
Указанный тип, слово или группа не является обязательным.
inset?

{A, B}
Повторять не менее A, но не более B раз.

<радиус>{1,4}

#
Повторять один или больше раз через запятую.
<время>#

Рис. 1. Результат использования псевдокласса :last-child

Спецификация

Спецификация	Статус
Selectors Level 4	Рабочий проект
Selectors Level 3	Рекомендация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.

• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.

• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

9	12	1	9.5	3.2	1

2.1	1	10	3.2

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Псевдоклассы

См. также

• :first-child и :last-child
• :first-of-type и :last-of-type
• :nth-last-child() и :nth-last-of-type()
• Псевдокласс :first-child
• Псевдокласс :first-of-type
• Псевдокласс :last-of-type

Подсказки

Скопировать ссылку «Подсказки» Скопировано

Часто начинающие разработчики пытаются применить эти псевдоклассы к родительскому элементу. Но тут необходимо просто запомнить, что нужно применять псевдоклассы именно к дочерним элементам, из списка которых надо выбрать. При расчёте порядкового номера дочернего элемента учитываются все соседние дочерние элементы, находящиеся на одном уровне с элементом, к которому мы применяем псевдокласс :nth — child , вне зависимости от класса и типа элемента.

Не надо стесняться пользоваться калькулятором NTH. Часто не получается сразу в уме составить правильную формулу.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Псевдокласс :nth-last-child | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Значение по умолчанию	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo

Описание

Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.

элемент:nth-last-child(odd | even | <число> | <выражение>) {.

Значения

odd

Все нечетные номера элементов.

even

Все четные номера элементов.

число

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

выражение

Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

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

Табл. 1. Результат для различных значений псевдокласса

Значение	Номера элементов	Описание
1	1	Последний элемент, является синонимом псевдокласса :last-child.
5	5	Пятый элемент с конца.
2n	2, 4, 6, 8, 10	Все четные элементы, аналог значения even.
2n+1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения odd.
3n+2	2, 5, 8, 11, 14

—
-n+3
3, 2, 1
—

5n-2
3, 8, 13, 18, 23
—

even
2, 4, 6, 8, 10
Все четные элементы.

odd
1, 3, 5, 7, 9
Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-last-child</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   td {
    border: 1px solid #333; /* Параметры рамки */
    padding: 3px; /* Поля в ячейках */
    border-left: 3px double #333; /* Граница слева */ 
   }
   td:nth-last-child(2n+1) {
    background: #f0f0f0; /* Цвет фона */
   }
   td:nth-child(1) {
    border: 1px solid #333; /* Параметры рамки */
    background: #cfc; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr> 
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table> 
 </body>
</html>

В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис.

Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы

Псевдоклассы

Пять полезных CSS селекторов

Помимо обычных селекторов тегов, потомков, классов и id селекторов, CSS располагает псевдо-классами, селекторы которых позволяют оформить HTML теги на основе их позиции в документе. В этой статье рассмотрим 5 полезных CSS селекторов, стоящих внимания при оформлении веб-страниц и приложений.

:first-child и :last-child

Селекторы :first-child и :last-child структурные псевдо-классы, позволяют выбрать первый или последний элемент от родительского.

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

Аналогично, :last-child, выберет последний элемент.

:nth-child

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

Синтаксис :nth-child, довольно прост, в круглых скобках заявляется какие элементы выбрать.

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

В следующем случае можно использовать целое число.

Что делает этот псевдо-класс реально мощным, так это пользовательская комбинация, для «особого» выбора элементов. Базовый синтаксис таков:

Значения a и b всегда представляются числом, в значение n не меняется (остается литералом). Значение b, это значение отступа, который определяет, какой элемент выбрать первым. Значение a, определяет цикл выбираемых элементов, после выбора первого элемента. Значение n, неизменно, это эдакий литерал, по сути с каждым «оборотом цикла» увеличивающийся на 1, начиная с 0. итак:

Что происходит, 3 элемент списка будет выбран первый (значение b), а затем до конца списка выбирается каждый второй (a).

Выражение, приведенное ниже, будет выбирать только первые 5 элементов списка, что достигается отрицательным значением n (если его сделать положительным, то наоборот первые 5 будут пропускаться и выбираться все остальные).

Иногда полезно использовать вариацию псевдо-класса, где b, считается не от начала а от конца ( работает она аналогично-инвертировано ), например выражение ниже, начнет выбирать с конца списка, отсчитав 10 элементов, и выделит каждый второй элемент вплоть до начала списка:

:nth-of-type

Аналогично :nth-child, выбирает элементы так же по выражению (an+b). Отличие его в том, что оно не зависит от позиции элемента в теле документа. Сейчас объясню более понятно: например

Если использовать div:nth-child(2n), то мы выделим блок только с номером 10, а если div:nth-of-type(2n), то будет выбираться каждый второй блок, независимо есть ли между ними span или нет. Грубо говоря :nth-child оперирует с элементами которые идут друг за другом, а :nth-of-type игнорирует все преграды и выбирает подряд. Какой псевдо-класс использовать, дело вкуса, но я склоняюсь к nth-of-type.

И соответственно «обратный» псевдо-класс :nth-last-of-type

:target

Весьма интересный псевдо-класс, который основывается на URL текущей страницы и выбирает элемент по соответствующему id. Например:

При нажатии на ссылку «введение», синим цветом будет выделяться блок с id=»intro». По сути выделяется тот элемент, чей id = URL после решетки ( #intro ).

Псевдо-элементы, дают доступ к «виртуальным» элементам документа, которые не указаны в HTML-коде. С помощью псевдо-элементов ::before и ::after, можно вставить «виртуальный» контент, который виден только пользователю браузера, до выбираемого элемента и после.

::before

Как называется, так и работает. Этот псевдо-элемент вставит контент вперед выбираемого элемента. Дабы это имело смысл, всегда используется свойство css content, — иначе смысл? В любом случае, это свойство должно, хотя бы, быть просто пустыми ковычками ( чтобы корректно работать ).

Тут к примеру вставляется картинка ко всем элементам с классом .pdf, и к ней же применяются свойства css.

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

Рассмотренные селекторы, отлично поддерживаются большинством браузером. Если не брать в счет ie8

• 2.97

Голосов: 1436 | Просмотров: 5313