—»     —»   Используем структурные псевдо-классы и селекторы псевдо-элементов
  Раздел: CSS/Style Sheets   Комментариев: 2  

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



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

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

Заметка: снова напоминаем вам о цифрах, указанных в скобках, – это версия CSS, в которой был представлен селектор.

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

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

Структурные псевдо-классы были представлены в качестве возможности указания html-элементов на основании информации в древе документа, что не так просто реализовать посредством простых селекторов или комбинаторов. Большинство из них было представлено в 3-й версии CSS.

Возможно, некоторые из них вы уже применяли. Если всё же применяли, то сталкивались ли вы с ситуацией, когда вам хотелось бы указать именно те элементы, которые были выделены? Без подобных селекторов мы были бы вынуждены добавлять класс или id к элементу, который нам нужно указать.

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

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

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

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

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

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

Вышеприведенный код CSS сообщает о необходимости найти 4-ю строку и задать ей светло-серый фоновый цвет.

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

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

Тем не менее, вы не ограничены числом 2. Можно использовать любую цифру.

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

В данном примере строкам 11, 21, 31 и т.д. будет задан светло-серый цвет фона.

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

Дочерний nth-last работает по тому же принципу, что и 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-last-child – это указание определенного или нескольких определенных единиц в конце списка.

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

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

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

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

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

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

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

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

Я уверен, что вы можете понять, какие абзацы указаны посредством CSS, приведенным выше. Опять же, мы используем псевдо-классы of-type, потому что элементы внутри div’а имеют смешанные типы.

:first-child и :last-child

Эти два псевдо-класса являются ярлыками для nth-child(1) и nth-last-child(1). Как и два класса nth, данные требуют, чтобы все дочерние элементы имели одинаковый тип.

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

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

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

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

: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:last-of-type (3) — подходит к элементу Е, который является последним смежным элементом своего типа.

Данные классы широко применимы для стилизации первого или последнего абзаца внутри элемента div, article или section.

only-child и only-of-type

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

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

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

В случае с only-child у вас будет лишь один элемент внутри родителя. В случае же с only-of-type, у вас может быть множество дочерних элементов, но лишь единственный указанный тип.

:empty

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

:empty – отличный способ указания пустых тегов. Например, он не подойдет, если

<p>Some text</p>

И подойдет, если

<p></p>

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

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

Существуют такие моменты, когда нам хочется кое-что оформить, но у нас нет возможности выделить элементы, основываясь на информации в древе документа.

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

У нас есть 4 псевдо элемента, которые мы можем указать

псевдо элемент ::first-line

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

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

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

псевдо элемент ::first-letter

E::first-letter (1) — подходит к первой форматированной букве элемента Е.

Подобно first-line, first-letter стилизует только первый символ. Этот эффект можно применять для создания буквицы.

<p class="intro">This is the first paragraph</p>

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

псевдо элементы ::before и ::after

E::before (2) — подходит к сгенерированному контенту перед элементом Е.

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

Псевдо элементы ::before и ::after помогают нам добавить какой-либо контент до или после элемента. Применение подобного эффекта распространено для оформления тега blockquotes изображением кавычек, либо для оформления списков.

<blockquote></blockquote>

blockquote::before {content: "&lsquo;"}
blockquote::after {content: "&rsquo;"}

Вышеприведенный код добавляет отдельный знак цитирования перед тегом blockquotes, и отдельный правый знак после него.

Бывают случаи, когда вы вынуждены использовать подобный метод, чтобы внедрить контент до или после элемента. Псевдо элементы ::before и ::after могут быть даже оставлены пустыми, но они должны быть указаны.

blockquote::before {content: "";}

С помощью данных двух псевдо элементов вы можете творить невероятное множество вещей, как показано в этом демо.

Два или одно двоеточие?

Стоит также рассказать об использовании двойного двоеточия во всех 4 псевдо элементах.

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

На данный момент лучше использовать одинарное двоеточие:

:first-letter
:last-letter
:before
:after

Браузерная поддержка

В целом, поддержка псевдо элементов гораздо лучше, нежели поддержка структурных псевдо-классов, хотя иногда бывает и наоборот. Элементы будут работать с версии IE8 и выше, а поддержка first-letter и first-line есть аж в версии 5.5. Именно, вы все прочли верно!

Большинство структурных псевдо-классов не работают в IE версией ниже 9, хотя поддержка first-child есть даже в 6-й версии.

* CSS contents and browser compatibility (Браузерная совместимость для CSS)
* Pseudo elements support (Поддержка псевдо элементов)
* CSS3 Selectors Test (Тестируем селекторы CSS3)

Итог

Как и с другими селекторами, о которых мы рассказывали, возможно, некоторые из них вы уже применяли на практике. Некоторые их них, вероятно, вы видите впервые.

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

Надеюсь, данная пробежка по селекторам оказалась полезной вам, и вы найдете нечто новое для себя и для повседневного применения.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 7423   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 октября 2011 @ 19:57
Написал: Turafruch — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Cпасибо. Новость отличная! вы супер!
Комментарий #2: 21 октября 2011 @ 19:59
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
Turafruch, пожалуйста.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2019    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031