Структурные псевдо-классы и псевдо-элементы

Данный урок является последним в серии, посвященной селекторам CSS. В первом уроке были рассмотрены селекторы атрибутов, во втором - комбинаторы и некоторые псевдо-классы. Завершим обзор селекторов разбором структурных псевдо-классов и псевдо-элементов.

Примечание: в скобках указан вариант стандарта CSS, в котором был введен селектор.

Структурные псевдо-классы

Структурные псевдо-классы были введены как способ указать элементы HTML на основе информации в дереве документа, которую сложно просто представить с помощью простых селекторов и комбинаторов. Большинство из них введено в CSS3.

Без них приходится использовать класс или идентификатор для указания элемента.

E:root (3) — соответствует элементу E, который является корневым для документа. В HTML это всегда элемент html.

:root {background: blue;}
html {background: blue;}

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

E:nth-child(n) (3) — соответствует элементу E, который является n-ым потомком своего родителя.

Предположим, у нас есть таблица с большим количеством строк.

tr:nth-child(4) {background: #ccc;}

Код примера будет задавать светло-серый цвет для каждой 4-й строки.

Распространенное использование данного псевдо-класса  - определение цвета для n-ой строки в таблице.

tr:nth-child(2n+1) {background: #ccc;}
tr:nth-child(2n) {background: #eee;}

2n+1 представляет нечетные строки, а 2n - четные. Можно использовать специальные значения для указания четных и нечетных строк.

tr:nth-child(odd) {background: #ccc;}
tr:nth-child(even) {background: #eee;}

Можно использовать любой номер:

tr:nth-child(10n+1) {background: #ccc;}

Код будет определять цвет фона для 11-й, 21-й, 31-й и так далее строк.

E:nth-last-child(n) (3) — соответствует элементу E, который является n-ым потомком своего родителя, считая от последнего потомка.

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

Снова предположим, что у нас есть таблица с большим количеством строк.

tr:nth-last-child(1) {background: #ccc;}

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

tr:nth-last-child(4) {background: #ccc;}

А здесь 4-я строка с конца таблицы будет иметь соответствующий цвет фона.

Также можно использовать значения для указания четных и нечетных строк:

tr:nth-last-child(2n+1) {background: #ccc;}
tr:nth-last-child(2n) {background: #eee;}

tr:nth-last-child(odd) {background: #ccc;}
tr:nth-last-child(even) {background: #eee;}

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

:nth-of-type и:nth-last-of-type

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

E:nth-of-type(n) (3) — соответствует элементу E, который является n-ым в списке смежных элементов данного типа.

E:nth-last-of-type(n) (3) — соответствует элементу E, который является n-ым с конца в списке смежных элементов данного типа.

nth-of-type() и nth-last-of-type() работают аналогично nth-child() и nth-last-child(). Разница заключается в том, что для указания элементов используется тип, а не родственные отношения.

Следует использовать псевдо-классы -of-type, когда родительский элемент имеет отличный от потомков тип.

HTML

<div>
 <p></p>
< img src="/" alt="" / >
 <p></p>
  <ul>
    <li></li>
    <li></li>
  </ul>
 <p></p>
</div>

CSS

p:nth-of-type(2) {font-size: 1.2em;}
p:nth-last-of-type(1) {font-size: 1.2em;}

Наверняка, вы догадались, какой параграф будет иметь какой цвет. В данном случае использовались псевдо-классы -of-type, так как элементы внутри div имеют разные типы.

:first-child и :last-child

Данные псевдо-классы представляют собой короткую запись для nth-child(1) и nth-last-child(1). Требуется, чтобы потомки были одного типа.

E:first-child (2) — соответствует элементу E, который является первым потомком своего родителя.

E:last-child (3) — соответствует элементу E, который является последним потомком своего родителя.

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

:first-of-type и :last-of-type

Данные два псевдо-класса представляют собой функциональный эквивалент nth-of-type(1) и nth-last-of-type(1) соответственно. Они работают так же, как и first-child и last-child, за исключением того, что указывается элемент определенного типа.

E:first-of-type (3) — соответствует элементу E, который является первым в списке смежных элементов данного типа.

E:last-of-type (3) —  соответствует элементу E, который является последним в списке смежных элементов данного типа.

Типовое использование данного псевдо-класса - определение специальных стилей для первого и последнего параграфа в статье.

only-child и only-of-type

Следующие два псевдо-класса служат для выделения единственных элементов.

E:only-child (3) — соответствует элементу E, который является единственным потомком своего родителя.

E:only-of-type (3) — соответствует элементу E, который является единственным с данным типом среди смежных элементов.

С помощью псевдо-класса only-child выделяется единственный элемент внутри родителя. А псевдо-класс only-of-type поможет выбрать уникальный элемент с определенным типом среди нескольких потомков.

:empty

E:empty (3) — соответствует элементу E,  который не имеет потомков (включая текстовое содержание)

Псевдо-класс :empty является способом указать пустой тег. Например, ему не будет соответствовать следующий элемент:

<p>Какой-нибудь текст</p>

А вот такой элемент соответствует данному псевдо-классу:

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

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

Существуют некоторые моменты реальной практики, когда нужно задать определенные стили различным частям разметки, но нет способа выделения таких частей на основе информации из дерева документа. Обычно, в таких случаях добавляются элементы (например, span) и для них задаются классы. 

У нас есть 4 псевдо-элемента, которые могут помочь определению стилей для особых случаев без создания лишних элементов в структуре DOM.

::first-line

E::first-line (1) — соответствует первой сформированной строке элемента E.

p:first-line {text-transform: uppercase;}

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

::first-letter

E::first-letter (1) — соответствует первому символу элемента E.

Как и first-line, first-letter выбирает только первый символ. Очевидное использование - выделение первой буквы.

HTML

<p class="intro">Первая строка параграфа</p>

CSS

p.intro::first-letter {
	font-size:4em; 
	font-weight:bold;
	color: #f00;
	float:left;
}

::before и ::after

E::before (2) — соответствует сгенерированному содержанию до элемента E.

E::after (2) — соответствует сгенерированному содержанию после элемента E.

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

HTML

<blockquote>Текст цитаты</blockquote>

CSS

blockquote::before {content: "‘"}
blockquote::after {content: "’"}

Код примера добавляет кавычки до цитаты и после нее.

The above adds a single left quotation mark before the blockquote and a single right quotation mark after it.

В некоторых случаях не нужно добавлять никакого содержания, а требуется только изменить стили с помощью ::before и ::after. Нужно обязательно включить свойство content:, но оставить его пустым.

blockquote::before {content: "";}

• Комментарии