среда, 29 октября 2014 г.

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

Псевдоклассы - это фантомные классы с заранее определенными именами, которые присваиваются элементам при соблюдении определенных условий (наведении мыши на элемент, вводе корректных данных и т.п.)

Ссылки, мышь и клавиатура:
:link - применяется к ссылкам, которых нет в истории браузера.
:visited - применяется к ссылкам, которые попали в историю браузера.
:focus - применяется к объектам, находящимся в фокусе (выделены клавишей Tab)
:hover - применяется к объектам, на которые наведена мышь.
:active - применяется к активным объектам, к которым применен щелчок мыши.
Атрибуты следует определять в указанном порядке (LVFHA), т.к. каждый предыдущий "перекрывает" последующий, будучи примененным в обратном порядке.
link и visited применяется только к ссылкам (<a>), focus по умолчанию к ссылкам, кнопкам, полям ввода и текстовым областям, но при использовании атрибутов contenteditable и tabindex к любым элементам. hover и active - к любым элементам.

:target - применяется, когда атрибут id элемента совпадает с идентификатором в URL.

Формы:
:enabled, :disabled - стиль применяется к доступным (недоступным) для редактирования элементам форм. Вариант [disabled] (атрибут вместо псевдокласса) поддерживается начиная с IE7, псевдоклассы только с IE9.
:checked - применяется к элементам формы (radio, checkbox, option), , находящимся в состоянии checked. IE9+
:indeterminate - применяется к элементам формы (IE9+) или элементу progress (IE10+), находящимся в неопределенном состоянии.
:required, :optional - применяется к обязательным (необязательным) элементам формы (IE10+)
:invalid, :valid - применяется к элементам формы (input), содержащим недопустимые (допустимые) значения. Параметры валидации устанавливаются через атрибуты, большая часть из которых IE10+
:default - применяется к элементу по умолчанию (одному в группе однотипных элементов, например, кнопке submit среди прочих кнопок).
:in-range, :out-of-range - применяется к элементу формы, значение которого находится (не находится) в установленных пределах.

Дерево элементов:
:root - применимо к корневому элементу тега. В стандарте HTML5 это тег html. Однако использование псевдоэлемента имеет больший приоритет, чем использование тега (1.0 против 0.1)
:empty - применяется к элементам, не имеющим потомков и не содержащих контента. (Например, стиль с селектором p:empty{} применится для <p></p>, но не применится для <p> </p> - элемент содержит пробел).
:first-child, :last-child, :only-child - стиль применяется только к первому, только последнему или единственному (элемент не имеет сиблингов) элементу-ребёнку некоторого родителя.
:first-of-type - стиль применяется к первому элементу ребёнку некоторого родителя, если этот ребёнок имеет заданный тип. При этом элементу могут предшествовать сиблинги других типов. (например p:first-of-type {} применит стиль к первому абзацу как ребёнку тега body, даже если элементу p предшествуют иные элементы (например, заголовки).
:last-of-type - аналогичен first-of-type, но относится к последнему элементу заданного типа.
:only-of-type - аналогичен предыдущим псевдоэлементам, но относится к единственному элементу заданного типа (p:only-of-type {} применится к содержимому элемента p только если родитель p имеет в качестве ребёнка только один элемент типа p).

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

:nth-child(n) - применить правило к элементу, если он является ребёнком с порядковым номером n, например p:nth-child(even) {} применит стиль к каждому чётному абзацу, а b:nth-child(3n) к каждому третьему жирному выделению абзаца.
:nth-last-child(n) - аналогичен предыдущему псевдоклассу, но нумерация происходит с конца.
:nth-of-type(n) - правило применяется к n-ному элементу указанного типа, определенного предшествующим селектором.
:nth-last-of-type(n) - аналогично предыдущему, с нумерацией с конца.

Прочие:
:fullscreen - правило применяется при перехода браузера в полноэкранный режим.
:lang(x) - правило применяется в случае, если используется язык x. (Фактически, эквивалентно [lang="x"], но псевдокласс может брать язык из контекста (сервер или тег meta)).
:not(x) - исключает из области действия правила все элементы, которые покрываются селектором x. p:not(.quote) {} - правило применяется для всех абзацев кроме тех, которые имеют класс .quote

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

:before, :after - позволяют разместить некоторый контент с определённым форматированием до или после CSS-бокса. Таким образом можно оформить, например цитаты (вынести знаки цитирования слева и справа или сверху и снизу от блока с цитатой), ненумерованные списки и т.п.

:first-letter, :first-line - позволяют изменить стиль первой буквы (т.н. буквицы) или первой строки элемента. Руководство по CSS-форматированию буквиц. и строк

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

::selection - позволяет изменить стиль выделенного текста. Для FF используется -moz-префикс. Используется только с двойным двоеточием.

Комментариев нет :

Отправить комментарий