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

Данный урок является последним в серии, посвященной селекторам 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: "&lsquo;"}
blockquote::after {content: "&rsquo;"}

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

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: "";}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/-jkYplBjUVA/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Структурные псевдо-классы и псевдо-элементы | | 2012-06-19 12:03:00 | | Статьи Web-мастеру | | Данный урок является последним в серии, посвященной селекторам CSS. В первом уроке были рассмотрены селекторы атрибутов, во втором - комбинаторы и некоторые псевдо-классы. Завершим обзор селекторов | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: