Что такое псевдоклассы?
Псевдоклассы используются для определения специальных состояний элемента. Например, можно определить:
- стили для элемента, когда на него наведена мышь;
- стили для гиперссылок.
Также, можно сказать, что псевдоклассы, это классы которые описаны в CSS, но не присутствуют в HTML коде, хотя и влияют на оформление элементов. Применение псевдоклассов позволяет расширить возможности оформления элементов на странице.
Пример использования
|
1 2 3 |
селектор:псевдокласс { свойство: значение; } |
Обратите внимание, что селектор:псевдокласс пишутся слитно! Без пробелов!
Псевдоклассы для оформления гиперссылок
Гиперссылки могут быть оформлены различными способами, так чаще всего используются следующие псевдоклассы:
- :link — псевдокласс описывающий обычное отображение гиперссылки;
- :visited — посещенная гиперссылка, часто отображают серым цветом, последнее время наметилась тенденция не оформлять посещенные гиперссылки;
- :hover — состояние ссылки, когда на нее наведен курсор мыши. Псевдокласс hover можно применять и на других элементах;
- :active — состояние ссылки в момент клика мышью. Данный класс можно применять и на других элементах, чтобы обозначить клик мышью. Например на кнопках.
Применение псевдоклассов для оформления ссылок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* непосещенная ссылка*/ a:link { color: #FF0000; } /* посещенная ссылка */ a:visited { color: #00FF00; } /* наведение мыши на ссылку */ a:hover { color: #FF00FF; } /* клик по ссылки */ a:active { color: #0000FF; } |
Обратите внимание, что псевдокласс :hover должен следовать после описания :link и :visited, для правильного срабатывания приоритета. Также, псевдокласс :active должен располагаться ниже класса :hover.
Псевдоклассы не являются регистрозависимыми.
В HTML5 переосмыслили понятие гиперссылки, которая теперь может выступать как блочный элемент.
Псевдоклассы и классы в CSS
Выше мы описывали применение псевдоклассов к тегам HTML. Однако, можно определить псевдоклассы и CSS классам, в таком случае описание выглядит следующим образом:
|
1 2 3 |
a.hello:hover { color: red; } |
|
1 2 3 |
.one:hover { background: green; } |
Псевдокласс :first-child
Псевдокласс :first-child позволяет оформить первый элемент вложенный внутри родителя.
Например, данный код выделит синим цветом первый параграф на странице:
|
1 2 3 |
p:first-child { color: blue; } |
Чтобы выделить первые элементы span во всех параграфах необходимо использовать код:
|
1 2 3 |
p span:first-child { color: red; } |
Для выделения всех элементов span внутри первого элемента p необходимо использовать:
|
1 2 3 |
p:first-child span { color: blue; } |
C псевдоклассами очень удобно работать в препроцессоре Sass
Еще псевдоклассы
| Селектор | Пример | Описание |
|---|---|---|
| :active | a:active | Выбор активной ссылки |
| :checked | input:checked | Все выбранные (отмеченные) элементы input |
| :checked | input:checked | Все выбранные (отмеченные) элементы input |
| :empty | p:empty | Все элементы p которые не имеет дочерних элементов |
| :focus | input:focus | Выбрать элемент input находящийся в фокусе |
| :invalid | input:invalid | Выбрать все элементы input с неправильными значениями |
| :last-child | p:last-child | Выбрать все элементы p, которые являются последним дочерним элементом родителя |
| :checked | input:checked | Все выбранные (отмеченные) элементы input |
| :required | input:required | Выбрать все обязательные к заполнению элементы input |
