CSS от А до Я использование псевдокласса hover и свойства height


Содержание материала:

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

Всем привет. В самом начале своей работы в веб-дизайне, я изучал все тяжелым способом: методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen и прочих волшебных вещей, окружающих нас сегодня. Если бы раньше кто-либо показал мне азы веб дизайна, особенно по части CSS, это было бы невероятно полезно.

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

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

Перед тем как погрузиться в вопрос, разберемся с терминами — если в названии есть псевдоклассы и псевдоэлементы, то что значит часть слова “псевдо”? Вот что говорит dictionary.com:

прилагательное 1. Ненастоящий, но похожий внешне; притворяющийся; ложный или мнимый 2. Почти такой же или пытающийся быть таким же

Не перегружаясь техническим определением W3C, псевдокласс можно определить, как фантомное состояние или специфическую характеристику элемента, которая может быть выделена с помощью CSS. Наиболее распространенные псевдоклассы это :link , :visited , :hover , :active , :first-child и :nth-child . Существуют и другие псевдоклассы, им мы тоже уделим внимание.

Псевдоклассы в стилях всегда выделяются предшествующим двоеточием ( : ), затем идет название псевдокласса и иногда значение в скобках.

Псевдоэлементы похожи на виртуальные элементы, которые мы можем обрабатывать как обычные HTML-элементы. Но они не существуют в дереве документа или в DOM, мы создаем их с помощью CSS.

Наиболее распространенные псевдоэлементы это :after , :before и :first-letter , мы рассмотрим их в конце статьи.

Одно или два двоеточия ставить перед псевдоэлементами?

Короткий ответ для большинства случаев — без разницы.

Двойное двоеточие ( :: ) было добавлено в CSS3, чтобы дифференцировать для различения псевдоэлементов типа ::before и ::after от псевдоклассов, таких как :hover и :active . Все браузеры поддерживают двойное двоеточие, кроме Internet Explorer (IE) 8 и ниже.

При этом некоторые псевдоэлементы, например, ::backdrop работают только с двойным двоеточием.

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

Вы можете выбрать любой вариант, здесь нет однозначного “за” или “против”.

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

Не забывайте, что в CSS3 псевдоэлементы выделяются двойным двоеточием, типа a::after < … >, для их отличия от псевдоклассов. Вы можете иногда это видеть в CSS. При этом CSS3 также позволяет использовать одно двоеточие ради обратной совместимости и в настоящее время мы рекомендуем придерживаться этого синтаксиса.

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

Когда использовать и не использовать генерируемый контент в CSS

Генерируемый контент в CSS реализуется с помощью комбинации свойства content с псевдоэлементами :before или :after .

Контентом может быть простой текст или контейнер, которым мы манипулируем при помощи CSS, чтобы выводить графическую форму или декоративный элемент. Здесь я буду говорить о первом типе контента — тексте.

Генерируемый контент не стоит использовать для важного текста по следующим причинам:

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

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

На Smashing Magazine есть отличная статья Габриеля Романато об использовании генерируемого контента.

Экспериментальные псевдоклассы и псевдоэлементы

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

Однако мы можем использовать экспериментальные псевдоклассы и псевдоэлементы с помощью вендорных префиксов; о поддержке вы можете узнать с помощью Can I Use, а для удобства работы есть такие инструменты как -prefix-free или Autoprefixer.

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

Псевдоклассы

Мы начнем с псевдоклассов для определенных состояний.

Псевдоклассы состояний

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

Итак, рассмотрим их.

Псевдокласс :link представляет нормальное состояние ссылок и используется для выделения ссылок, которые до сих пор не посещены. В стилях рекомендуется объявлять этот псевдокласс перед всеми остальными классами этой категории. Полный порядок псевдоклассов такой: :link , :visited , :hover и :active .

Этот псевдокласс можно пропустить:

:visited

Псевдокласс :visited используется для стилизации ссылок, уже посещенных пользователем. В стилях он указывается вторым, после псевдокласса :link :

:hover

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

:active

Псевдокласс :active используется для стилизации “активированных” элементов, путем нажатия мыши или касания к экрану. Активация также может производиться и с клавиатуры, также как в случае с псевдоклассом :focus .

Он и работает аналогично :focus , с единственной разницей, что псевдокласс :active фиксирует событие между нажатием и отпусканием клавиши мыши.

Оно следует четвертым в стилях (после :hover ).

:focus

Псевдокласс :focus используется для стилизации элемента, получившего фокус с помощью курсора, касания или нажатия на клавиатуре. Он часто используется в элементах форм.

Бонус: миксин Sass для ссылок

Если вы используете препроцессоры CSS, типа Sass, этот раздел должен заинтересовать вас. Если вы их не используете (не бойтесь, это нормально), вы можете пропустить его.

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

Идея миксина состоит в отсутствии настроек по умолчанию в качестве аргументов, мы просто декларируем все 4 состояния ссылок.

Псевдоклассы :focus и :active обычно декларируются вместе, но при желании вы можете разделить их.

Учтите, этот миксин может быть применен к любому элементу HTML, не только к ссылкам. Вот он:

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

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

:first-child

Псевдокласс :first-child выделяет элемент, который является первым потомком своего родительского элемента.

В следующем примере только первый элемент li будет выделен оранжевым текстом.

:first-of-type

Псевдокласс :first-of-type выделяет первый элемент своего типа в указанном родительском контейнере.

В следующем примере первый элемент li и первый элемент span будут выделены оранжевым цветом.

:last-child

Псевдокласс :last-child выделяет элемент, которыя является последним дочерним элементом в родительском контейнере.

В следующем примере, последний элемент li будет выделен оранжевым цветом.

:last-of-type

Псевдокласс :last-of-type выделяет последний элемент своего типа в родительском контейнере.

В следующем примере, текст в последнем li и последнем span будет оранжевым.

Псевдокласс :not также известен как псевдокласс-отрицание. Он принимает в скобках аргумент — другой селектор. Этим аргументом может быть и другой псевдокласс. Аргументы могут составлять цепочку, но сам :not не может в этой цепочке передаваться в качестве аргумента.

В следующем примере, псевдокласс :not выберет все элементы, не подпадающее под селектор-аргумент. Оранжевым будет весь текст, кроме элемента li с классом .first-item :

Теперь попробуем сделать цепочку из двух псевдоклассов :not . У всех элементов будет черный цвет и желтый фон, кроме элемента li с классом .first-item и последнего li в списке.

Демо

:nth-child

Псевдокласс :nth-child выделяет один или более элементов в зависимости от их порядкового номера в разметке.

Это один из самых универсальных и надежных псевдоклассов в CSS.

Все псевдоклассы :nth принимают аргумент в виде формулы в скобках. Формула может быть просто целым числом, может структурироваться в виде an+b или использовать ключевое слово odd или even .

  • a это целое число;
  • n это литерал (т.е. мы просто используем букву n внутри формулы);
  • + это оператор (это может быть как + , так и — );
  • b это целое число, используемое только при использовании оператора.

Вот список с греческим алфавитом, на базе которого мы сделаем несколько примеров:

Выделим второй элемент в списке, только “Beta” будет оранжевой:

Теперь выделим все элементы с порядковыми номерами, кратными двум. Оранжевыми будут “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa”:

Те же самые четные элементы можно выделить и с помощью ключевого слова even :

А теперь выберем все элементы кратные двум, начиная с шестого. Итак, оранжевыми будут “Zeta,” “Theta” и “Kappa”.

Демо

:nth-last-child

Псевдокласс :nth-last-child работает аналогично :nth-child , но выбирает элементы не с начала, а с конца.

Продолжим мучать греческий алфавит. Выберем второй элемент с конца — оранжевой у нас будет только “Iota”:

Теперь выберем все дочерние элементы по порядковому номеру с конца, кратному двум. Это будут Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha”:

Теперь выделим их же с помощью ключевого слова:

И, наконец. выберем все элементы с конца кратные двум начиная с шестого. “Epsilon,” “Gamma” и “Alpha”!

:nth-of-type

Псевдокласс :nth-of-type схож с :nth-child с той разницей, что он обладает большей специфичностью, так как выбирает конкретный тип элемента внутри родительского контейнера.

В следующем примере, оранжевый цвет будет у второго параграфа.

:nth-last-of-type

Псевдокласс :nth-last-of-type делает то же, что и :nth-of-type , но отсчитывая с конца.

В следующем примере мы будем выбирать второй параграф с конца (это будет первый параграф в статье):

Дополнительные ресурсы по классам семейства :nth

:only-child

Псевдокласс :only-child выбирает единственного потомка родительского элемента.

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

:only-of-type

Псевдокласс :only-of-type выбирает элемент, у которого нет соседних элементов того же типа. Он похож на :only-child , но более осмыслен за счет указания конкретного элемента.

В следующем примере в первом ul только один элемент списка, который и будет выделен оранжевым.

:target

Псевдокласс :target выбирает элемент, ID которого используется в качестве хэша в URL.

В следующем примере, статья с ID target будет выделяться, когда URL в адресной строке будет завершаться на #target .

URL: http://awesomebook.com/#target

Совет: короткая запись background в стилях успешно заменяет background-color .

Псевдоклассы валидации

Формы всегда были ядом веб-дизайна и веб-разработки. С помощью псевдоклассов валидации, мы можем сделать процесс заполнения форм более плавным и приятным.

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

:checked

Псевдокласс :checked выбирает радиокнопки, чекбоксы и опции, которые были отмечены пользователем.

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

Демо

:default

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

В случае, если вам надо выбрать кнопку по умолчанию в форме с незаданным классом, вы можете использовать псевдокласс :default .

Учитывайте, что наличие кнопки “Reset” или “Clear” в форме создает проблемы с юзабилити. Подробнее об этом можно прочитать в следующих статьях.

Демо

:disabled

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

В следующем примере поле ввода name , поэтому оно будет выведено наполовину прозрачным.

Совет: в разметке не обязательно писать disabled=»disabled» , того же результата можно достичь просто использовав атрибут disabled . Однако полная запись необходима в XHTML.

Демо:

:empty

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

Вот более полные определения:

Нет содержимого или каких-либо символов. Комментарии HTML содержимым не считаются.

Не пустой элемент

В элементе есть какие-либо символы, даже невидимые, например, пробел.

В следующем примере:

  • В верхнем контейнере есть текст, поэтому у него будет оранжевый фон;
  • Во втором контейнере есть пробел, который считается контентом, его фон также будет оранжевым;
  • В третьем контейнере нет ничего — он пустой и поэтому у него желтый фон.
  • В последнем контейнере есть комментарий HTML, который не считается контентом и поэтому у контейнера желтый фон.

Демо:

:enabled

Псевдокласс :enabled выбирает элементы, включенные для пользователя; по умолчанию все элементы формы включены, если в разметке им не задан атрибут disabled .

Мы можем использовать комбинацию :enabled и :disabled , чтобы обеспечить визуальную обратную связь, улучшая тем самым пользовательский опыт.

В следующем примере, ранее отключенное поле ввода name включено, к нему добавлена однопиксельная граница зеленого цвета и полная непрозрачность.

Совет: использование в разметке enabled=»enabled» не требуется, достаточно просто enabled ; исключением является только XHTML.

Демо:

:in-range

Псевдокласс :in-range выбирает элементы, которым задан диапазон и значение, которых входит в этот диапазон.

В следующем примере поле ввода поддерживает диапазон между 5 и 10, все значения между ними вызовут измение цвета границы поля на зеленый.

Демо:

:out-of-range

Псевдокласс :out-of-range выбирает элемент, у которого есть диапазон и значение которого не входит в этот диапазон

В следующем примере поле ввода поддерживает диапазон от 1 до 12 — для всех остальных значений будет задан оранжевый цвет границы поля.

Топ-пост этого месяца:  Настройка Яндекс Директ для интернет-магазина как создать объявления, настроить таргетинг и

Демо:

:indeterminate

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

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

Демо:

:valid

Псевдокласс :valid выбирает элемент формы, если она заполнена корректно в соответствии с требуемым форматом.

В следующем примере поле ввода email отформатировано правильно, поэтому оно будет считаться валидным и, соответственно, получит однопиксельную зеленую границу.

:invalid

Псевдокласс :invalid выбирает элемент формы, если она заполнена некорректно в соответствии с требуемым форматом.

В следующем примере, поле ввода email отформатировано неправильно, поэтому оно будет считаться невалидным и, соответственно, получит однопиксельную оранжевую границу.

Демо:

:optional

Псевдокласс :optional выбирает поля ввода, которые не являются обязательными. Другими словами, любой элемент input без атрибута required будет выбран псевдоклассом :optional .

В следующем примере поле ввода опционально — у него нет атрибута required и поэтому текст в этом поле будет серым.


:read-only

Псевдокласс :read-only выбирает элемент, которые не может быть отредактирован пользователем. Он похож на :disabled — и выбор между ними зависит от использованного атрибута в разметке.

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

В следующем примере у элемента input есть атрибут readonly . Мы выделим этот элемент серым цветом благодаря псевдоклассу :read-only .

Демо:

:read-write

Псевдокласс :read-write выбирает элементы, которые могут редактироваться пользователем. Он может работать со всеми элементами HTML с атрибутом contenteditable .

Этот псевдокласс можно сочетать с псевдоклассом :focus для улучшения пользовательского опыта в определенных ситуациях.

В следующем примере, пользователь может после щелчка мышью редактировать содержимое элемента div . Мы облегчим пользователю понимание этого, добавив стили, отличающие редактируемую часть контента от всего остального.

Демо:

:required

Псевдокласс :required выбирает поля ввода, которым задан атрибут required .

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

В следующем примере, у поля ввода есть атрибут required . Мы можем улучшить впечатления пользователя, соответствующим стилем показав обязательность поля.

Демо:

:scope (эксп.)

Псевдокласс :scope имеет смысл, когда он привязан к HTML-атрибуту scoped тега style .

Если этого атрибута у тега style нет в разделе страницы, значит этот псевдокласс выберет элемент html , который является зоной видимости для стилей по умолчанию.

В следующем примере, у блока HTML есть стили с атрибутом scoped , поэтому весь текст второго элемента section будет выделен курсивом.

Демо:

Псевдоклассы, связанные с языком страницы

Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не работают с медиа-контентом типа изображений или видео.

:dir (эксп.)

Псевдокласс :dir выбирает элемент, направленность текста в котором определена в документе. Другими словами, чтобы использовать этот псевдокласс, нам надо в разметке у соответствующего элемента добавить атрибут dir .

На данный момент поддерживается два направления текста: ltr (слева направо) и rtl (справа налево).

На момент написания статьи только Firefox (с префиксом -moz-dir() ) поддерживается псевдокласс :dir . В будущем префикс, скорее всего, будет не нужен, поэтому в примерах селектор задан как с префиксом, так и без него.

Примечание: Сочетание префиксной и безпрефиксной версий в одном правиле не работает. Надо создавать два отдельных правила.

В следующем примере оранжевым цветом будет выделен параграф на арабском (как известно, текст в нем пишется справа налево).

В англоязычном параграфе (слева направо) текст будет синим.

Демо:

Псевдокласс :lang выбирает элемент с указанным языком. Язык может быть задан с помощью атрибута lang=»» , соответствующего элемента meta или же в HTTP-заголовках.

Атрибут lang=»» обычно используется с тегом html , но он также может применяться и к любому другому тегу.

Для чего этом можно использовать? Например, общей практикой является использование традиционных для каждого языка кавычек с помощью свойства CSS quotes . Однако большинство браузеров (включая IE9 и выше) способны добавлять нужные кавычки автоматически, если они не объявлены в CSS.

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

Вот, например, немецкие кавычки, добавленные браузером:

Однако, в большинстве случаев, немецкие кавычки добавленные в CSS выглядят так:

Верными являются оба варианта. Поэтому решение остается за вами — отдать ли выбор кавычек на усмотрение браузера или использовать псевдокласс :lang и свойство CSS quotes .

Давайте добавим кавычки с помощью CSS.

Демо:

Остальные псевдоклассы

Теперь перейдем к оставшемся псевдоклассам и их функциональности

Псевдокласс :root ссылается на высший родительский элемент в документе.

Виртуально во всех случаях в роли :root будет элемент html . Однако это может быть и другой элемент, если используется другой язык разметки, такой как SVG или XML.

Давайте добавим фоновый цвет к элементу html .

Примечание: мы можем добиться того же эффекта, использовав в качестве селектора html . Но так как :root псевдокласс у него большая специфичность, чем у селектора элемента.

:fullscreen (эксп.)

Псевдоклассс :fullscreen выбирает элемент, выведенный на всю ширину экрана.

Однако, он не рассчитан на работу при нажатии пользователем F11 и переходе браузера в полноэкранный режим. Он скорее ориентирован на работу с JavaScript Fullscreen API, предназначенном для изображений, видео и игр, выполняющихся в родительском контейнере.

О переходе в полноэкранный режим выводится сообщение в верхней части браузера, вернуться из него можно нажав клавишу Escape . Мы сталкиваемся с этим при просмотре видео в максимальном размере на YouTube или Vimeo.

Если вы собираетесь использовать псевдокласс :fullscreen , учитывайте, что стили браузеров в этом режиме очень различны. И вам придется использвать браузерные префиксы не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку Эрнан Райчерта screenfull.js, решающую большую часть проблем с кроссбраузерными глюками.

Рассмотрение Fullscreen API находится за пределами этой статьи, вот сниппет, который будет работать в браузерах на движках WebKit и Blink.

Демо:

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

Как упоминалось в начале статьи, псевдоэлементы можно сравнить с виртуальными элементами, которые можно обрабатывать как обычные элементы HTML. Они не существуют в дереве документа или в DOM, это значит, что мы их создаем с помощью CSS.

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

::before/:before

Псевдоэлемент :before , также как и его сосед :after добавляет содержимое (текст или форму) к другому элементу HTML. Еще раз отмечу, что этого контента нет в DOM, но им можно манипулировать, как будто он есть. Свойство content надо добавлять в CSS.

Запомните, что добавленный в псевдоэлемент текст нельзя выделить.

В результате будет выведено:

Примечание: Обратили внимание на пробел после “Hello ”? Да, о пробелах надо позаботиться самостоятельно.

::after/:after

Псевдоэлемент :after также используется для добавления содержимого (текста или формы) к другому элементу HTML. Этот контент отсутствует в DOM, но им можно манипулировать, как будто он есть; свойство content надо добавлять в CSS. Текст, добавленный в псевдоэлемент, нельзя выделить.

В результате будет выведено:

::backdrop (эксп.)

Псевдоэлемент ::backdrop это бокс, генерируемый перед полноэкранным элементом, расположенным над всем остальным контентом. Он используется в сочетании с псевдоклассом :fullscreen для изменения цвета фона максимизированного окна — если вас не устраивает дефолтный черный.

Примечание: для псевдоэлемента ::backdrop обязательно двойное двоеточие, иначе он не работает.

Разовьем наш пример с псевдоклассом :fullscreen :

Демо:

::first-letter/:first-letter

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

Это отличная вещь для использования в параграфах, для повышения типографской привлекательности без использования изображений и внешних ресурсов.

Совет: этот псевдоэлемент способен захватывать первую букву, сгенерированного контента в :before , несмотря на его отсутствие в DOM.

::first-line/:first-line

Псевдоэлемент :first-line выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.

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

::selection

Псевдоэлемент ::selection используется для стилизации выделенного текста. Браузеры на движке Gecko пока используют версию с префиксом ::-moz-selection .

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

::placeholder (эксп.)

Псевдоэлемент ::placeholder выбирает текст, добавленный в качестве заглушки в элементы формы с помощью атрибута placeholder .

Его также можно указывать как ::input-placeholder , этот синтаксис фактически и используется в CSS.

Примечание: этот элемент еще не является частью стандарта, с большой вероятностью его имплементация изменится в будущем, поэтому используйте его с осторожностью.

В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент ::placeholder реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:

Заключение

Итак, похоже, это все.

Псевдоклассы и псевдоэлементы CSS однозначно удобны, не так ли? Они дают такое количество возможностей, что вы чувствуете себя перегруженными. Но в этом все жизнь веб-дизайнеров и разработчиков.

Тщательно тестируйте код. Хорошо реализованные псевдоклассы и псевдоэлементы должны пройти долгий путь.

CSS, псевдокласс, псевдоэлемент: hover, child, target

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

Псевдоклассы работают по тому же принципу, что и обычные классы в разметке, однако физически они на странице не присутствуют. С их помощью можно выбрать элементы на основании не входящей в документ информации, которую не получится выбрать обычным селектором. Вот простой пример: у вас есть красная кнопка, а вы хотите, чтобы при наведении она становилась синей. Теоретически это можно реализовать на JavaScript, но зачем такие сложности? Гораздо удобнее использовать :hover CSS. С его помощью можно придать блоку любые параметры, которые будут срабатывать исключительно при наведении курсора мыши.

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

:nth-of-type

Предположим, у вас есть список, в котором вы хотите использовать чередование цветов, т. е. первая строка будет, к примеру, написана красным шрифтом, а вторая – синим, третья снова красным, четвертая снова синим. Раньше для этого приходилось создавать новые классы. Верстальщики прошлого добавляли каждому элементу списка по классу, а затем меняли их внешний вид в таблице стилей. Это было не слишком удобно и загрязняло верстку.

Сейчас все делается проще. Используйте псевдокласс CSS :nth-of-type. Это даст возможность получить необходимый визуальный эффект, ничего не меняя в разметке. Принцип действия прост: вы указываете селектор, а в скобках после его названия пишете формулу или ключевое слово, которые будут находить требуемые элементы. Например, :nth-of-type(even) найдет все четные элементы, а :nth-of-type(odd) – нечетные. Существует большое количество формул, которые используются для максимально точного контроля. В скобках можно указать число – в таком случае стили будут применяться к элементу, индекс которого равен этому числу.

:nth-child

Этот псевдокласс CSS по принципу действия схож с предыдущим, но в отличие от него работает исключительно с дочерними элементами выбранного элемента. Например, если вы хотите с его помощью настроить внешний вид тегов
в списке, нужно использовать конструкцию ul:nth-child, поскольку

    является родителем
    .

Для точного контроля можно использовать формулы. Они довольно сложны для новичка, но стоит немного углубиться в синтаксис, как все становится проще. Формулы выглядят так: an+b, где а – это множитель, а b – смещение. Например, если в скобках указать n, то псевдокласс выберет все дочерние элементы (потому что не указаны дополнительные условия в виде а и b). Если указать n+2, будут выбраны все элементы, кроме первого (потому что смещение равно двум). Лучше всего этот момент изучать на практике. Поэкспериментируйте с дочерними компонентами и разными формулами.

:last-child

Тут все просто. Псевдоклассы CSS child используются для выбора одного конкретного элемента. Этот выбирает последний дочерний компонент родителя. Используется довольно часто, например, чтобы выделить последнюю строку таблицы или убрать отступ у последнего блока, чтобы избежать его переноса на следующую строку.

:nth-last-child

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

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

Псевдоклассы управления состояниями

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

Это псевдокласс ссылок CSS, причем не любых, а только тех, что еще не посещались. В нем можно задать стили для тех элементов , по которым пользователь пока не переходил.

:visited

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

Псевдокласс :target CSS

Один из самых интересных псевдоклассов, который при грамотном использовании до некоторой степени заменяет использование JavaScript. Он дает возможность управлять элементом, идентификатор которого указан в строке адреса страницы. Да, с первого раза это трудно понять. Попробуем разобрать на примере.

Допустим, у нас на странице есть 3 блока div с определенными id: id1, id2, id3. Также у нас есть три ссылки с соответствующими значениями href: #id1, #id2, #id3. При нажатии на первую ссылку в строке адреса страницы после ссылки на саму страницу появится соответствующий id.

В CSS для всех блоков div указано свойство display:none, то есть по умолчанию они не показываются. Используем target:div и задаем ему свойство display:block. Теперь, при нажатии по ссылкам с определенными href, блокам с соответствующими >

Топ-пост этого месяца:  Как правильно установить плагин в WordPress

Все еще ничего не понятно? Попробуйте поэкспериментировать. Создайте страницу с описанной выше разметкой и стилями. Через пару минут вы отлично во всем разберетесь.

Псевдоклассы, которые могут применяться к любым элементам

Большинство описанных выше псевдоклассов требовало ссылок для работы. Однако не всем нужны элементы . Ряд вариантов может применяться к абсолютно любым частям страницы.

  • :active предназначен для стилизации элементов, по которым пользователь кликнул левой кнопкой мыши;
  • :hover – CSS для элементов, на которые пользователь наводит курсор;
  • :focus – для тех частей страницы, которые сейчас находятся в фокусе. Этот псевдокласс часто используется для работы с формами. Например, если вы хотите выделить строку ввода имени пользователя, когда посетитель устанавливает в нее курсор и начинает набирать символы.

Помните, что :active действует только в момент нажатия. Сразу после прекращения работы левой кнопки мыши заданные с его помощью стили исчезнут и элемент будет отображаться так, как он отображался по умолчанию. В большинстве случаев этот псевдокласс применяется для работы с кнопками. Можно задать им большое количество состояний. Например, по умолчанию кнопка будет синей, при наведении – зеленой, при нажатии – красной, и т. д.

Разумеется, псевдоклассы полностью поддерживаются только современными браузерами. Например, в IE6 и 7 не удастся использовать focus, а hover и active в IE6 работают только для ссылок. Будем надеяться, что вам не придется работать с такими браузерами, а если все же необходимость возникла, применяйте условные комментарии.

Дополнительные псевдоклассы

Перечисленными выше вариантами список не ограничивается. Благодаря современному CSS можно выделять только включенные элементы (:enabled) или только выключенные (:disabled), только отмеченные переключатели checkbox и radio (:checked). Вкратце опишем еще несколько вариантов, которые вы можете использовать для более тщательного управления внешним видом содержимого.

  • :only-child — ает возможность применять стиль к элементу, который является единственным дочерним элементом;
  • :lang — для работы с элементами, у которых задан язык с помощью атрибута lang;
  • :root — используется для выбора корневого элемента. Соответственно, в HTML таковым является тег ;
  • :not — очень мощный инструмент. Дает возможность ограничивать применение стилей по определенным селекторам. Вот пример: .blue-color:not(span). Такой селектор применит стили ко всем элементам с классом blue-color, если они не являются .

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

Псевдоклассы и псевдоэлементы

Предыдущие статьи этого учебника преимущественно были посвящены применению CSS стилей непосредственно к HTML элементам через использование различных селекторов, таких как селектор типа, селектор класса, id селектора и селектора потомков.

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

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

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

Псевдоэлементы ::first-letter и ::first-line

В современном стандарте CSS 3 используются 5 (пять) основных псевдоэлементов, которые добавляются к селекторам и имеют следующий синтаксис:

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

Первыми псевдоэлементами, которые мы рассмотрим будут ::first-letter и ::first-line. Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.

Псевдоэлемент ::first-line позволяет стилизовать первую строку абзаца, которая будет отличаться от основного текста. Данный псевдоэлемент дает более широкие возможности для оформления текста.

Давайте рассмотрим пример их использования:

Псевдоклассы и псевдоэлементы в CSS (hover, before, first-child и другие)

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

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

Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.

Псевдоэлементы используются не сами по себе, а только в совокупности с основными селекторами:

Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.

Далее рассмотрим некоторые псевдоэлементы и их свойства.

:first-letter

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

Рассмотрим применение first-letter на примере создание выступающего инициала:

И результат примера:

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

:first-line

Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы. Посмотрим действие псевдоэлемента :first-line на абзац текста:

:after и :before

Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.

Как видим в конце каждого абзаца вставлен текст «webcodius.ru», как и прописано в css правиле в свойстве «content». Если в место «after» поставить «before», то текст вставиться в начале абзаца.

Псевдоклассы

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

При описании css правил псевдоклассы обычно используют в совокупности с основными селекторами:

Если псевдокласс указывается без селектора впереди (:hover), то он применяется ко всем элементам страницы.

Псевдоклассы условно делятся на три группы:

  • определяющие состояние элементов;
  • имеющие отношение к дереву элементов;
  • указывающие язык текста.

Псевдоклассы, определяющие состояние элементов

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

Псевдокласс :link применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a <. >и a:link <. >в таблице стилей дают одинаковый результат, поэтому псевдокласс :link можно не указывать.


Псевдокласс :visited определяет внешний вид посещенных ссылок, т.е. ссылок по которым пользователь уже щелкнул. По умолчанию такие ссылки меняют свой цвет на фиолетовый, но с помощью данного псевдокласса цвет и другие параметры можно поменять.

Псевдокласс :active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.

Псевдокласс :focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.

И последний псевдокласс :hоvеr применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.

Для примера посмотрим как будут выглядеть ссылки в разных состояниях:

Псевдоклассы структуры документа

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

Первыми рассмотрим псевдоклассы :first-child и :last-child, которые привязывают стиль к элементам селектора, которые являются соответственно первым и последним дочерним элементом своего родителя. Чтобы стало понятней рассмотрим эти псевдоклассы на примере маркированного списка:

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

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

В примере псевдокласс : only-of-type применяется к элементу , в правилах стиля которого размер шрифта увеличивается в два раза. Размер шрифта увеличивается только у тех гиперссылок, которые у своих родителей (в данном случае это тег

) встречаются только один раз.

Псевдокласс :nth-child позволяет привязать стиль к элементам Web-страницы, на основе их нумерации в дереве элементов:

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

  • odd — стиль будет привязан ко всем нечетным элементам удовлетворяющих значению ;
  • even — означает все четные элементы;
  • число — обозначает порядковый номер дочернего элемента относительно своего родителя (нумерация начинается с 1 — обозначает первый элемент);
  • выражение — задается в виде формулы an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2.

Например, как выделить все четные строки таблицы цветом? В этом случае идеально поможет псевдокласс :nth-child:

В коде примера запись tr:nth-child (2n) означает, что стиль необходимо привязать ко всем элементам tr, с помощью которых формируются строки таблицы (об этом мы говорили в статье как вставить таблицу на html-странице). Причем порядковый номер строк относительно родительского элемента table должен удовлетворять формуле 2n, в которую браузер вместо n подставляет целые числа 0, 1, 2. В итоге получается, что стиль применяется к строкам под номерами 2, 4, 6 и т.д.

Псевдоклассы :not и *

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

Стиль будет привязан к элементам веб страницы, удовлетворяющим основному селектору и не удовлетворяющему селектору выбора. Например:

В результате этого css правила, текст всех заголовков h1 окрасятся в красный цвет, кроме того у которого атрибут id будет равен main.

И последний на сегодня псевдокласс * («звездочка»), который обозначает любой элемент html страницы. Он может потребоваться в случае, если необходимо установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. Синтаксис:

Например, чтобы установить размер текста для всех элементов документа можно использовать следующее правило css:

На этом все, до новых встреч на страницах блога!

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжим тему изучения таблицы каскадных стилей и наполнять новыми материалами справочник.

Тема селекторов в CSS, которая была начата в предыдущей статье, осталась еще не завершенной, ибо мы рассмотрели только пять из семи возможных типов (тега и класса (class), Id, универсальный и атрибутов) и на очереди остались селекторы псевдоклассов и псевдоэлементов.

Отношения между тегами Html кода — дерево документа

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

Результат работы парсера любого браузера можно увидеть с помощью некоторых плагинов или расширений для этих обозревателей. Например, все тот же незаменимый плагин для Firefox под названием Firebug показывает это самое дерево документа:

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

Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):

  1. Предки и потомки. Например, для тега, показанного на приведенном выше примере, все остальные элементы являются потомками. Для них же всех он является прародителем — предком. Т.е. все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
  2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
  3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.

Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

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

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

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

First-child в IE 6 не работает, что печально.

Селекторы псевдоэлементов — first-line (letter), after и before

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

По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что first-line будет указывать на первую линию, а first-letter — на первую букву.

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

Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты подключим CSS к языку Html с помощью тега style и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:

Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:

Ну, а с помощью first-letter можно сделать, например, так называемую буквицу (когда первая буква в абзаце отличается большим размером и цветом). Для этого можно будет прописать следующие CSS плавила для данного селектора псевдоэлемента:

Про Em, Ex, пиксели и другие размерности в CSS мы с вами уже говорили. Исходный код с добавленными свойствами тогда будет выглядеть так:

А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:

Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

Если бы мы вместо «after» использовали бы «before», то дополнительный контент был бы добавлен внутри каждого абзаца на странице, но уже перед его содержимым. Напрашивается вопрос — а для чего это можно использовать на практике?

Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

Для того, чтобы получить такой сложно нумерованный список, используется довольно простой Html код:

Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:

Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

Псевдоклассы.

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

Вот список всех псевдоклассов:

  • hover — Стиль элемента на который наведён курсор мыши.
  • active — Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
  • visited — Стиль для недавно посещённой ссылки.
  • link — Стиль для нечасто посещаемой ссылки.
  • focus — Стиль элемента находящегося в фокусе.
  • first-child — Стиль первого дочернего элемента.
  • lang — Определяет язык, который используется в фрагменте документа.

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

Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:

a — элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover — после двоеточия собственно нужный нам псевдокласс.
— ну и блок объявления стилей в фигурных скобках.

А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку — то она покраснеет.

Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.

Псевдокласс hover.

Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

Ну а раз уж догадались просто покажу пример:

Чем Вам не блок навигации по сайту?

А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.

Псевдокласс hover

Всем привет. Итак, что же такое псевдокласс hover в CSS. Это, прежде всего, набор свойств, применяемых к элементу. Но видимость всех этих свойств появляется лишь тогда, когда на определенный объект наводится курсор мыши. Для примера можно посмотреть на ссылки. Обычно они все как-то меняются при наведении на них курсора. Я недавно писал про красивый эффект для ссылок, так вот, там как раз применяется псевдокласс hover. Практически ко всем фрагментам можно применить псевдокласс hover и это безусловно будет выделять его из общего потока на странице. Если у вас блог или магазин, примените на страницах псевдокласс hover и сайт тут же оживет.

Можно так же сделать всплывающие подсказки на CSS, с использованием того же псевдокласса hover. В своих материалах на тему CSS, много где упоминается про этот псевдокласс, но давайте все же разберем небольшой и самый простой пример. За пример возьмем тег «а». Пишем обычный линк без применения к нему каких-либо свойств. Браузер будет использовать свои собственные стили.

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

Это самый простой пример того, что можно сделать с псевдоклассом hover. На моем блоге задействовано множество элементов, но я не хочу вам их перечислять потому, как возможно когда вы будете это читать, тех эффектов уже не будет. На самом деле перечислять все эффекты не имеет смысла, их огромное множество и ограничить в этом может только ваша фантазия. Но увлекаться сильно не стоит. Как говорится -все хорошо в меру. Если что-то было непонятно, то напишите об этом в комментариях.

Псевдоклассы.

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

Вот список всех псевдоклассов:

  • hover — Стиль элемента на который наведён курсор мыши.
  • active — Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
  • visited — Стиль для недавно посещённой ссылки.
  • link — Стиль для нечасто посещаемой ссылки.
  • focus — Стиль элемента находящегося в фокусе.
  • first-child — Стиль первого дочернего элемента.
  • lang — Определяет язык, который используется в фрагменте документа.

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

Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:

a — элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover — после двоеточия собственно нужный нам псевдокласс.
— ну и блок объявления стилей в фигурных скобках.

А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку — то она покраснеет.

Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.

Псевдокласс hover.

Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

Ну а раз уж догадались просто покажу пример:

Чем Вам не блок навигации по сайту?

А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.

Анимируйте свойство перехода CSS внутри: после /: перед псевдоклассами

Можно ли анимировать псевдоклассы CSS?

Скажем, у меня есть:

Возможно ли это? Я тестировал и пока не могу найти решение. Я пытаюсь урезать объем поддержки JavaScript, который мне нужен, используя Modernizr.

У меня уже есть метод JavaScript, поэтому, пожалуйста, никаких альтернатив JavaScript.

Ваша скрипка работает для меня в Firefox. И насколько я знаю, и если эта статья обновлена, это единственный браузер, который может анимировать псевдоэлементы.

EDIT. По состоянию на 2020 год ссылка на статью нарушена, а соответствующая ошибка WebKit была исправлено 4 года назад. Читайте дальше, чтобы увидеть другие ответы, это устарело.

Google Chrome добавил исправление ошибки webkit в версию 27.0.1453.110 m

ВОЗМОЖНО для анимации псевдо :before и :after , вот несколько примеров для анимации psuedo-элементов :before и :after .

Ниже приведена модификация вашего примера с некоторыми изменениями, которые делают его оживляющим и более плавным без симулированной задержки mouseleave / mouseout при наведении:

Попробуйте добавить главный селектор #foo с помощью сгруппированного псевдо-класса :hover во втором правиле псевдокласса :hover . Также добавьте свойство transition , а не только префиксные свойства поставщика для transition :

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

В этом примере имитируется анимация вращения при наведении:

Конечно, продвигаясь вперед с помощью стандартов css3, мы могли бы использовать ::before и ::after .

Это работает в последних Firefox, Chrome, Safari, Opera 18+, IE10, IE11 (IE9 и ниже не поддерживают переходы css3 или анимацию.)

Синтаксис, псевдоклассы, иерархия и свойства css

Рассмотрим стилизацию документа, придания определенного цвета, размера, последовательности и текста на странице.

Состоит из простых конструкций, которые легко можно выучить.

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

Все правила англоязычные, со смысловой нагрузкой, это упростит запоминания.

Чтобы использовать css в документах html его нужно подключить, указав путь к файлу.

  1. В базовом документе html можно использовать тег style. Мгновенного подключения стиля в браузере до загрузки основных css
  2. Второе когда стили должны быть опционально изменены в процессе работы на сайтом
  3. Инлаиновое использование css определенных тегов, значит встроенный css. Инлаиновый стиль имеет больший преоритет

Синтаксис css

Первым делом пишем селектор, который указан в html документе, затем фигурные скобки.

Внутри все свойства со значениями. Разделяются свойства точкой с запятой.

Например, есть селектор у дива с названием cl в html документе, то через точку в css пропишем этот же селектор и зададим свойства, это селектор класса.

Есть селекторы элементов, например section.

Третьим рассмотрим селектор id.

Псевдоэлемент after и before

Они пишутся через две точки, добавляются в div если его стилизуем.

Элементы after и before имеет свойство content, добавим в свойство фигурную скобку и посмотрим как получилось в браузере.

Видим, что эти элементы появляются до и после контента.

Открываем инспектор в браузере, проверяем внутри данного дива эти элементы.

Элемент checked

У input с типом checkbox и radio есть параметр checked, это значит, что чекбокс по умолчанию выбран.

Его можно стилизовать, указав в атрибутах checked.

Затемним свойством opacity.

Следующий селектор empty

Делаем структуру из двух параграфов заполненных и одним пустым.

В свойствах пишем фон зеленый и min-height 20 пикселей.

Получится полоса, где пустой элемент.

Если в него написать, то он автоматически отменяет свойство и появится текст.

Псевдокласс hover и target

  1. hover применяет к элементу свои свойства при наведении. Создадим две ссылки и применим стиль цвета. Наводим на link 1 он становится синим.
  2. Target можно сделать меню для навигации по странице. Например есть два линка и два блока div таргет 1 и 2, в котором есть текст. Первая ссылка ведет на таргет 1, вторая на 2. Добавим стили. Сейчас при нажатии на link 1 обводится текст из первого блока зеленым.

Иерархия приоритетов стилей

  1. Самый высокий приоритет у свойства обладает, у которого указан в конце конструкция восклицательный знак !important. Не выжно какая вложенность у селектора и каким способом подключаются стили у этого свойства будет высший приоритет.
  2. Следующий по значимости обладает инлаиновый стиль, через атрибут style.
  3. Стили подключенные внешним файлом.
  4. Самый низкий приоритет у родительских перед дочерними селекторами.

Стили в одном документе, например в main.sass

  1. Стили идущие ниже по документу имеют наибольший приоритет, если два стиля записаны одинаково, то применится нижний.
  2. Если верхний стиль был бы длиннее, то значения его свойства были в приоритете.

Css свойства

Рассмотрим самые ходовые свойства. Остальные свойства можно найти в справочнике css свойств.

  • первое свойство это цвет элемента color
  • background-color цвет фона элемента
  • font-size размер шрифта элемента
  • Уровень прозрачности элемента opacity
  • padding размер полей внутри элемента
  • widht ширина блочного элемента не включая границ и полей
  • внешние отступы элемента margin
  • height высота блочного элемента не включая размер полей и границ
  • насыщенность шрифта font-weight
  • text-align горизонтальное выравнивание элемента

Медиа запросы

Это база для создания адаптивной верстки.

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

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

Такие запросы пишутся в самом файле main.sass.

Запрос начинается с объявления правила @media.

Условие будет либо устройство либо разрешение экрана, на котором отображается документ.

Медиа запрос размещается в конце документа потому, что у него нет приоритета.

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