Думаю большинство слышали что такое псевдоклассы и имели с ними дело. Но если всё-таки нет, то расскажу.
Псевдоклассы используются для добавления специальных эффектов для селекторов. Ну это то, что стоит после двоеточия.
Основные, которые все веб-мастера используют для ссылок – это link, visited, hover и active. Думаю они всем знакомы, кто делает сайты. Но они не единственные, кроме них есть еще много псевдоклассов. Мы рассмотри все. Но начнём мы с упомянутых выше.
:link
Ненужный псевдоселектор, отвечающий за стили обычной ссылки. А точнее не посещённой. Почему ненужный? Просто если написать a:link {blablabla} и просто a {blablabla}, то в браузер не увидит разницы.
Поддерживается с CSS1.
:visited
Этот псевдоселектор отвечает за посещенную ссылку. Юзер нажал на ссылку, а она – бац и перекрасилась в другой цвет!
Поддерживается с CSS1.
:hover
Этот отвечает за ссылку (не обязательно ссылку) при наведении.
Поддерживается с CSS1.
:active
А этот отвечает за то, какой ссылка будет при нажатии на неё.
Поддерживается с CSS1.
Идём дальше…
:focus
Данный псевдоселектор отвечает за объект при фокусе. Фокус – это, например, текстовое поле, куда устанавливается курсор. Т. е. если нажать на поле, то туда установится курсор, если нажать куда-нибудь в другое место, то курсор пропадёт. Вот этот псевдокласс применит стиль к полю, пока там установлен курсор.
Но он работает не только к текстовым полям.
Поддерживается с CSS2
:lang()
Отвечает за стили объектов с атрибутом lang. Пример:
Code
<style type="text/css">
div:lang(ru) {color:#F00}
</style>
<div lang="ru">Цвет этого текста перекрасится в красный</div>
<div>Цвет этого текста Не перекрасится</div>
Поддерживается с CSS2 :first-child
Этот псевдоселектор отвечает за стили первого дочернего элемента.
Поддерживается с CSS2
:last-child
А этот псевдоселектор отвечает за стили последнего дочернего элемента.
Поддерживается с CSS3
:only-child
Позволяет применять стили к элементу только в том случае, если он единственный дочерний элемент.
Поддерживается с CSS3
:nth-child()
Псевдокласс отвечает за дочерний элемент указанный сначала по счету (думал сформулировать не смогу). Интересный псевдокласс. Интересен он потому что можно указывать не просто число, но и четность. Например, чтобы стилизовать все четные элементы, нужно прописать :nth-child(even), а дня не четных нужно прописать :nth-child(odd). Можно также использовать выражения. Например, :nth-child(2n) (аналогично even), или :nth-child(2n+1) (аналогично add), или :nth-child(3n+2) и т.д…
Поддерживается с CSS3
:nth-last-child()
Этот псевдокласс аналогичен предыдущему, но элемент указывается по счету с конца.
Поддерживается с CSS3
:root
Псевдоселектор :root отвечает за корневой элемент документа. В html документах это всегда тег html
Поддерживается с CSS3
:not()
Этот селектор запрещает использования стилей для определённого элемента. Например, если написать .lol:not(div){color:#F00}, то текст во всех элементах с классом «lol» перекрасится в красный, кроме div блоков с этим классом. Кроме тегов можно использовать классы, другие селекторы или параметры. Например, :not(:lang(ru)) или :not([title="ololo"])
Поддерживается с CSS3
:empty
Применяет стили к пустым элементам.
Поддерживается с CSS3
:first-of-type
Применяет стили к первому дочернему элементу указанного типа элементов.
Поддерживается с CSS3
:last-of-type
Применяет стили к последнему дочернему элементу указанного типа элементов.
Поддерживается с CSS3
:nth-of-type()
Применяет стили к последнему, указанному по счету, элементу указанного типа элементов.
Поддерживается с CSS3
:nth-last-of-type
Применяет стили к последнему, указанному по счету с конца, элементу указанного типа элементов.
Поддерживается с CSS3
:nth-last-of-type
Применяет стили элементу, если он единственный элемент указанного типа элементов.
Поддерживается с CSS3
:target
Действительно полезный псевдокласс. Применяет стиль к действующим якорям. К примеру, если у вас ссылка типа …index.html#anchor, то псевдокласс применит стили к элементам с идентификатором «anchor«
Поддерживается с CSS3
:enabled
Ну тут объяснять много не нужно. Применяет стили к активным формам.
Поддерживается с CSS3
:disabled
Противоположность предыдущему псевдоклассу.
Поддерживается с CSS3
:checked
Применяет стили к отмеченным чекбоксам и радобаттонам.
Поддерживается с CSS3
:indeterminate
Radio and checkbox elements can be toggled by the user, but are sometimes in an indeterminate state, neither checked nor unchecked. This can be due to an element attribute, or DOM manipulation.
Что-нибудь поняли? На сколько я смог перевести, этот псевдокласс используется для чекбоксов и радиобаттонов с неопределённым состоянием. И еще что то там про DOM написано…
Поддерживается с CSS3
:default
Данный псевдокласс позволяет использовать стили для элементов форм, установленных по умолчанию.
Поддерживается с CSS3
:valid
Устанавливает стили для валидных элементов форм. (Это работает только при указанном доктайпе)
Поддерживается с CSS3
:invalid
Это для невалидных элементов форм.
Поддерживается с CSS3
:in-range
Устанавлевает стили для элементов форм, если их значения попадает в границы (Рабоает только при установленных аттрибутах min и max)
Поддерживается с CSS3
:out-of-range
Если значения элементов форм не попадает в границы.
Поддерживается с CSS3
:required
Для обязательных полей.
Поддерживается с CSS3
:optional
Для обязательных полей.
Поддерживается с CSS3
:read-only
Задает стили для элементов форм, которые доступны только для чтения.
Поддерживается с CSS3
:read-write
Задает стили для элементов форм, которые доступны для чтения и записи.
Источник: frostart.ru
