Псевдоклассы являются очень успешной концепцией, содержащейся в спецификациях CSS 1 и 2, хотя они очень ограничены в своем первоначальном представлении. Псевдоклассы — это селекторы CSS (часть, которая не входит в {} и используется для соответствия определенным элементам HTML), которые отличаются от обычных классов в процессе их генерации. Вместо указания атрибута класса для элементов, которые вы хотите стилизовать и сопоставить их с селектором .classname , вы можете использовать стандартные селекторы псевдоклассов, которые начинаются с : и что браузер будет сопоставлять элементы, которые удовлетворяют определенным условиям.
: парить
Примером псевдокласса из CSS 2 является одно из наиболее успешных применений CSS для взаимодействия с пользователем, псевдокласс : hover . Этот псевдокласс автоматически активируется всякий раз, когда мышь находится над элементом селектора, что дает веб-дизайнеру возможность задавать правила CSS, которые будут применяться в ответ на конкретное событие. Например, вы можете легко переключаться с подчеркнутого на обычный текст, когда ссылка находится под указателем мыши:
a:hover { text-decoration: none; }
Эти правила можно сопоставить с дополнительным определением без: hover (например, a: hover становится просто a ), с противоположными правилами, которые применяются, когда мышь больше не находится на элементе. С этой парой селекторов, события onmouseover и onmouseout больше не нужны для применения графических правил, хотя они все еще полезны, когда нужно выполнить больше вычислений в ответ на переход пользователя по ссылке, например, запрос Ajax.
В области веб-дизайна: hover широко используется для создания динамических дизайнов на чистом CSS, когда необходимо наведение на один элемент, например, изменение фона, границ или веса шрифта элементов меню, когда они находятся под указателем, или даже отображение подменю. Вот живой пример .
Настоящая сила псевдоклассов
Идея псевдоклассов состоит в том, чтобы преобразовать определение поведения из программного (функции JavaScript, связанные с событиями) в декларативное (правила CSS), что является тем же, что библиотеки JavaScript пытаются сделать сегодня. Например, Dojo Toolkit проверяет атрибут dojoType элементов для преобразования входных и выходных данных HTML в виджетах JavaScript без необходимости разработки подпрограмм для их инициализации.
Декларативные интерфейсы программирования, как правило, менее мощные, чем императивные, но они менее подвержены ошибкам из-за их ограниченного размера. Стандартное поведение, такое как указатель мыши или событие отсутствия мыши, реализовано браузерами последовательно раз и навсегда, вместо того, чтобы повторяться на каждой странице на нескольких диалектах JavaScript.
Декларативные подходы, такие как псевдоклассы, также занимают меньше места, поскольку они реализованы на C (языке программирования браузера) вместо JavaScript в пространстве страниц. Меню и панель навигации, реализованные с помощью: hover, также доступны поисковым системам и программам чтения с экрана, что повышает доступность.
CSS3 новые псевдоклассы
Спецификация CSS3 вводит больше псевдоклассов для использования в качестве селекторов. Я представлю здесь самое важное, что может облегчить боль многих веб-разработчиков, когда дело доходит до обогащения пользовательского опыта с помощью ограниченных инструментов интерфейса браузера и без введения библиотек JavaScript, которые оказывают большое влияние на время загрузки.
: n-й дочерний элемент имеет возможность сопоставить определенного дочернего элемента по кардинальному номеру. Ничего необычного, но число можно выразить линейным полиномом от n (an + b). Числа, полученные в результате замены натуральных чисел на n, будут сопоставлены селектором.
Например, вы можете легко сопоставить третий абзац div:
div p:nth-child(3) {}
Но также и нечетные строки таблицы (гораздо полезнее):
tr:nth-child(2n+1) {}
Или один из трех рядов:
tr:nth-child(3n) {}
: empty будет соответствовать пустым элементам. Например, полезно свернуть поля пустых абзацев или заполнить таблицы ячеек определенным фоном, если они ничего не содержат:
td:empty { background-color: grey; }
: target является одним из наиболее популярных в CSS2 селекторов CSS3. Прямо сейчас фрагменты URL (часть URL, заканчивающаяся на #) используются для отслеживания навигации AJAX. CSS3 расширяет эту концепцию с помощью: target. Правила внутри псевдокласса: target будут применяться к элементу с идентификатором, равным текущему фрагменту URL.
Вы можете увидеть потенциал здесь: ссылки, которые изменяют фрагмент (например, <a href=»#mysubpage»>), могут использоваться для динамического применения правил, например, для отображения, к части страницы (<div id = «mysubpage «class =» box «>), которые обычно не отображаются. В результате получается одностраничная навигация (в стиле Gmail) без использования JavaScript, если данные, которые нужно перетасовать, находятся на одной странице:
.box {
display: none;
}
:target {
display: block;
}
Наконец ,: not просто отменяет содержащийся селектор, так что указанные правила будут применяться ко всем элементам, которые ему не соответствуют. В CSS2 единственным способом применить правило к каждому элементу, кроме конкретного, было сочетание * универсального селектора с последующим переопределением для этого конкретного элемента.
Все, что блестит, не золото
Поддержка CSS3 реализуется большинством популярных браузеров, и здесь есть Internet Explorer, который даже в своей версии 8.x полностью игнорирует псевдоклассы, поддерживаемые другими браузерами, такими как Firefox и Safari. Opera и Chrome очень хорошо придерживаются стандарта (хотя это еще не стандарт).
Прошло много времени, прежде чем веб-разработчики смогут использовать CSS3 (и его новые псевдоклассы) кросс-браузерным способом и в рабочем коде. Тем не менее, важно знать об инновациях, чтобы, когда они станут общедоступными, мы были готовы их использовать. Надеемся, что CSS3 и HTML5 наконец-то ликвидируют разрыв между веб-приложениями и настольными приложениями в ближайшие годы.