- Псевдоклассы в CSS
- Псевдоклассы html структуры
- Псевдоклассы действий
- Псевдоклассы для ссылок
- Псевдоклассы для элементов ввода
- Другие псевдоклассы
- Обсуждение ( 0 )
- CSS3 — новые псевдоклассы
- Чередование цвета строк (:nth-of-type)
- Выравнивание текста столбцов (:nth-child)
- Выделение последней строки (:last-child)
- Поиск в обратном направлении (:nth-last-child)
- Псевдоклассы состояний
Псевдоклассы в CSS
Псевдокласс — это ключевое слово, которое указывается после селектора через знак двоеточия ‘:’. Псевдоклассы позволяют более гибко находить нужные элементы по определенному паттерну или состоянию. Их можно разделить на несколько категорий.
Псевдоклассы html структуры
Структурные псевдоклассы позволяют задать стили элементам на одном уровне вложенности в зависимости от их расположения внутри родительского элемента.
:only-of-type — единственный дочерний элемент того же типа (https://codepen.io/Yury_P/pen/eYddKMG)
:nth-child() — находит элементы по паттерну, имеет несколько вариантов указания значений.
- Ключевые слова: (https://codepen.io/Yury_P/pen/XWjjYoq)
odd — все нечетные элементы
even — все четные элементы - Функциональная запись: (https://codepen.io/Yury_P/pen/BaLLPoQ)
Формула: An+B
A — (число) указывает на периодичность
B — (число) указывает стартовый элемент
n — счетчик
Для выбора дочернего элемента на конкретной позиции нужно указать одно число с нужным порядковым номером.
:nth-last-child() — работает аналогично псевдоклассу :nth-child(), только в обратном порядке, начиная с конца. (https://codepen.io/Yury_P/pen/JjRbKXx)
:nth-of-type() — работает аналогично псевдоклассу :nth-child(), только с учетом типа элемента (https://codepen.io/Yury_P/pen/MWjbbgK)
:nth-last-of-type() — работает аналогично псевдоклассу :nth-of-type(), только в обратном порядке, начиная с конца. (https://codepen.io/Yury_P/pen/bGwBBNy)
:root — указывает на корневой элемент документа html, но его специфичность больше, чем у селектора html.
:not() — псевдокласс отрицания, указывает на все элементы кроме указанного (https://codepen.io/Yury_P/pen/ExgNNRQ)
:empty — указывает на пустой элемент, без других элементов или текста (https://codepen.io/Yury_P/pen/eYdBBQG)
Псевдоклассы действий
Псевдоклассы действий позволяют задать стили элементу с которым пользователь взаимодействует.
:hover — срабатывает при наведении курсора на элемент (https://codepen.io/Yury_P/pen/zYKooNz)
:active — срабатывает в момент активации элемента пользователем (обычно момент от нажатия кнопки мыши и до момента ее отпускания) (https://codepen.io/Yury_P/pen/OJRbbje)
Псевдоклассы для ссылок
:link — указывает на ссылки, которые еще не были посещены
:visited — указывает на посещенные ссылки
Если селектору нужно задать несколько псевдоклассов, некоторые нужно задавать в определенном порядке, псевдоклассы :link, :visited, :hover, :active (сокращенно LVHA) — нужно задавать в данном порядке, иначе один псевдокласс может перезаписать другой.
Псевдоклассы для элементов ввода
:optional — указывает на элементы input, которые не обязательны к заполнению (без атрибута required) (https://codepen.io/Yury_P/pen/KKgNawq)
:required — указывает на элементы input, которые обязательны к заполнению (указан атрибут required) (https://codepen.io/Yury_P/pen/mdrORey)
:valid — указывает на элементы input и form, которые прошли валидацию (https://codepen.io/Yury_P/pen/oNzYBdN)
:invalid — указывает на элементы input и form, которые не прошли валидацию (https://codepen.io/Yury_P/pen/LYRbxGa)
:checked — указывает на элементы input (type=”radio / checkbox”) и option (внутри тега select), которые выбраны. (https://codepen.io/Yury_P/pen/gOwLxQK)
:default — указывает на элементы button, options, input (type=”radio / checkbox”), которые установленные по умолчанию (https://codepen.io/Yury_P/pen/mdrORWe)
:read-only — указывает на элементы, которые недоступные для редактирования (https://codepen.io/Yury_P/pen/zYKNqbP)
:read-write — указывает на элементы, которые доступные для редактирования, например input (type=”text”) (https://codepen.io/Yury_P/pen/RwGKadd)
:in-range — указывает на элементы, значения которых находятся в допустимом диапазоне, который для них указан (https://codepen.io/Yury_P/pen/qBaqRjG)
:out-of-range — указывает на элементы, значения которых находятся вне допустимого диапазона, который для них указан (https://codepen.io/Yury_P/pen/oNzYBeK)
Другие псевдоклассы
:target — указывает на целевой элемент.
Например, HTML элемент с id=»block» будет целевым элементом, если в адресе сайта будет происходить переход к этому элементу по идентификатору (http://site.com/#block).
:any-link — указывает на элементы, которые используют псевдоклассы :link и :visited (a, link, area с указанным атрибутом href)
:lang() — позволяет задать некоторые настройки в зависимости от языка, например задать разные кавычки для разных языков (https://codepen.io/Yury_P/pen/dypOOEr)
Существует еще некоторое количество псевдоклассов которые находятся в экспериментальной стадии или на стадии рабочего черновика. Их использование на реальных проектах крайне не рекомендуется, поддержка у браузеров может быть очень низкой или отсутствовать вовсе. Поддержку псевдокласса можно проверить на сайте https://caniuse.com/
Обсуждение ( 0 )
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
CSS3 — новые псевдоклассы
предназначены для выбора элементов на основании информации, не входящей в документ, или информации, которая не может быть выражена обычными селекторами. Вероятно, вы уже использовали псевдоклассы ранее — например, :hover для изменения цвета ссылки, когда пользователь наводит на нее указатель мыши. В CSS3 появилось несколько новых псевдоклассов, заметно упрощающих поиск элементов.
Для начала рассмотрим простой пример таблицы, на которой и будем испытывать новые псевдоклассы:
Перед вами довольно стандартный счет с ценами, количеством единиц товара, суммами строк, промежуточной суммой и общей суммой заказа. Счет было бы удобнее просматривать, если бы строки были окрашены в разные цвета. Также будет полезно изменить цвет итоговой суммы, чтобы она лучше выделялась на общем фоне.
Ниже приведен код таблицы и ее базовое стилевое оформление:
Продукт Цена Количество Общая стоимость Кофе 30 5 150 Рубашка 400 2 800 Красный степлер 50 4 200 Общая стоимость 1150 Доставка 120 Итого 1270
Чередование цвета строк (:nth-of-type)
Каждый из нас неоднократно видел таблицы с чередованием цвета строк (эффект зебры): этот эффект полезен тем, что упрощает просмотр данных по строкам. Стилевое оформление такого рода лучше всего выполняется средствами уровня представления, то есть CSS. Традиционно задача решалась включением в строки таблицы дополнительных имен классов (например, odd и even для нечетных и четных строк соответственно).
Однако подобное загрязнение разметки таблицы нежелательно, поскольку спецификация HTML5 рекомендует избегать использования имен классов для определения представления. При помощи новых селекторов мы сможем добиться желаемого эффекта без изменения разметки — таким образом, представление будет отделено от контента.
Селектор nth-of-type находит каждый n-й элемент конкретного типа, определяемый формулой или ключевыми словами. Формулы будут более подробно рассмотрены позднее, а пока разберемся с ключевыми словами, потому что их проще понять.
Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все четные строки таблицы и назначить им другой цвет фона. То же самое делается с нечетными строками. В CSS3 имеются ключевые слова even и odd, предназначенные именно для таких ситуаций:
tr:nth-of-type(even) < background-color: #DCC; >tr:nth-of-type(odd)
Фактически этот селектор означает: «Найти каждую четную строку таблицы и задать ее цвет. Затем найти каждую нечетную строку таблицы и задать ее цвет. Так «зебровая» окраска таблицы реализуется без использования сценарного кода или дополнительных имен классов в строках.
Очередная версия стилевого оформления таблицы выглядит так:
Выравнивание текста столбцов (:nth-child)
По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого — чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child, но сначала необходимо узнать, как он работает.
Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an+b, где а — множитель, a b — смещение. Принцип использования формул проще понять на примере. Давайте применим его к контексту таблицы. Для выбора всех строк таблицы можно воспользоваться селектором вида:
В этом примере не указан ни множитель, ни смещение. Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением:
А для выбора каждой второй строки таблицы используется множитель 2n:
Каждая третья строка выбирается при помощи множителя 3n. Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой:
Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись:
Выделение последней строки (:last-child)
Таблица уже сейчас смотрится вполне прилично, но начальство требует, чтобы нижняя строка выделялась жирным шрифтом. Для этого мы воспользуемся селектором last-child, который находит последний дочерний элемент группы:
Поиск в обратном направлении (:nth-last-child)
Если стоимость доставки снижена под действием скидки, то соответствующая строка таблицы должна выделяться цветом. Для быстрого поиска этой строки удобно использовать селектор nth-last-child. Вы уже видели, как селектор nth-child и формула an+b используются для выбора конкретных дочерних элементов. Селектор nth-last-child работает практически так же, если не считать того, что он перебирает дочерние элементы в обратном порядке, начиная с последнего. Это позволяет легко найти предпоследний элемент группы, что, собственно, и нужно сделать в нашем примере.
Итак, оформление строки со стоимостью доставки может быть изменено следующим кодом:
Селектор определяет конкретный дочерний элемент — второй с конца.
В оформление таблицы осталось внести последний штрих. Ранее мы выровняли по правому краю все столбцы, кроме первого. Для строк с описаниями и ценами товаров такое выравнивание естественно, но последние три строки выглядят немного странно. Для них лучше использовать выравнивание по правому краю. Для решения этой задачи мы используем селектор nth-last-child с отрицательным множителем и положительным смещением:
Такая формула реализует интервальный выбор. В ней используется смещение 3, а с селектором nth-last-child выбирается каждый элемент до заданного смещения. Если бы вместо него использовался селектор nth-child, то строки выбирались бы от начала таблицы.
Новое оформление таблицы выглядит намного лучше, причем нам совершенно не пришлось изменять разметку:
Псевдоклассы состояний
В CSS3 появилось несколько новых псевдоклассов, определяющих состояние элементов. Эти псевдоклассы применяются в основном к элементам форм. К ним относятся :enabled — элемент включен и доступен, :disabled — элемент отключен, :checked — используется в переключателях input типа checkbox или radiobutton. Ниже показан пример использования этих элементов:
button:enabled < border: 2px #92e0f7 solid; background: #2ccbf9; color:white; >button:disabled
В стилях задается оформление для двух состояний кнопки: