Структурные псевдо-классы и псевдо-элементы
Данный урок является последним в серии, посвященной селекторам 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: "";}
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/-jkYplBjUVA/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.