Динамические псевдоклассы

Послание № 17

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

Псевдоклассы описывают характеристики элементов, такие как динамическое состояние — нажатая ссылка, язык кодировки — абзац на другом языке и т.д. Они не отображаются в исходном документе и не принадлежат дереву документа DOM (дереву документа принадлежат только сами html-элементы).

Без использования псевдоклассов изменить внешний вид по умолчанию и задать индивидуальный для каждого элемента можно только используя селектор — имя тега, класс или идентификатор элемента. Но как быть в случае, когда нужно выделить фоном каждую чётную строку таблицы? Прописывать классы вручную для каждой строки таблицы займёт много времени и значительно увеличит разметку. В такой ситуации на помощь приходит псевдокласс :nth-child(even), и с помощью селектора tr:nth-child(even)автоматически устанавливается фон для каждой чётной строки таблицы.

Рис. 1. Таблица-зебра с помощью класса и псевдокласса

В процессе взаимодействия пользователя со страницей html-элементы приобретают динамические характеристики. Например, когда вы переходите по ссылке, html-элемент <a>…</a> приобретает следующие свойства (характеристики):

1. Когда вы наводите на ссылку, она получает a:hover;

2. Когда вы уже перешли по ссылке — a:visited.

Доступ к таким динамическим характеристикам можно получить только с помощью псевдоклассов.

Таким образом, с помощью псевдоклассов можно получить доступ к информации, характеризующей элемент, которая не может быть получена с помощью простых селекторов — p {css-стили} или их комбинации — h1 + p {css-стили}.

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

Важно!

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

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

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

· Динамические псевдоклассы;

· Псевдоклассы пользовательского интерфейса;

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

· Псевдокласс отрицания :not();

Как это пишется в коде

Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору.

Псевдокласс будет определять только определённое состояние этого селектора.

Синтаксис выглядит следующим образом:

селектор:псевдокласс { }, например:

p:hover{

       background-color: red;

}

Этот код сделает фон красным у всех тегов <p>, но только в тот момент, когда на них будет наведен курсор мыши.

Важно!

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

А теперь давайте разберем каждый по подробней )))

Динамические псевдоклассы

Псевдокласс : link и :visited выбирают ссылки на странице, которые имеют атрибут href и находятся в определенном состоянии:

· :link — не посещенная ссылка;

· :visited — посещенная ссылка;

Синтаксис:

a:link {

color: #0000d0; /* Цвет ссылок */

}

a:visited {

color: #900060; /* Цвет посещенных ссылок */

}

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

· :focus — элементы которые активированы посредством курсора мыши или на которые перешли с помощью клавиатуры (кнопка TAB);

Синтаксис:

.form-text:focus {

background: #ffe;

border: 1px solid #29B0D9;

}

Псевдокласс : hover Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

· :hover — можно применять к всевозможным элементам, стили применяются при наведении пользователем на элемент;

div:hover {

background: #786b59;

color: #ffe;

}

Псевдокласс :active определяет стиль для активных элементов. Иными словами, стили будут срабатывать, когда на элементе нажата кнопка мыши.

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

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

Псевдокласс only-of-type (единственный из выбранного типа)

Для всех псевдоклассов действует один и тот же формат:

выбираемый-элемент:селектор { /* стиль */ }

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

Обратите внимание на пример:

a:only-of-type {

border: 2px solid black;

}

В приведённом коде выбираемый элемент — тег <a>, а его селектор — one-of-type.

Начнём с того, что выберем всё, что есть в DOM, а затем отфильтруем.

Так как в нашем случае выбираемым элементом являются элементы <a>, то мы можем сделать следующее:

Мы выбрали все элементы <a> в каждой секции и последовательно их пронумеровали слева направо. Не забывайте, что порядок очень важен.

Теперь мы завершаем часть работы, связанную с выбираемым элементом, и приступаем к фильтрации.

Only-of-type проходит через все секции, выбирая только те элементы <a>, которые являются единственными для своей секции.

Обратите внимание, что <a>-элементы для первой и второй секций не были выбраны из-за того, что они не являются единственными для своих секций. Иначе говоря: одна секция — один элемент <a>.

Псевдокласс first-of-type (первый из выбранного типа)

Селектор first-of-type выбирает каждый первый элемент <a> в секции.

Код, который выполняет условия приведённой справа схемы:

a:first-of-type {

border: 2px solid black;

}

Псевдокласс last-of-type (последний из выбранного типа)

Last-of-type — полная противоположность псевдокласса first-of-type.

Псевдокласс nth-of-type (n-й из выбранного типа)

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

a:nth-of-type(1) {

border: 2px solid black;

}

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

Итак, давайте вернёмся к селектору. a:nth-of-type(1) может читаться точно так же, как и a:first-of-type. В данном случае эти селекторы работают одинаково: каждый из них выбирает только те элементы <a>, которые являются первыми в своих секциях.

А если мы пойдём немного глубже и напишем следующее условие:

a:nth-of-type(2) {

border: 2px solid black;

}

то селектор выберет каждый второй элемент <a> в первой и во второй секциях.

CSS3-переходы

CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover.

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

Для задания всех свойств обычно используют краткую запись свойства transition.

Послание № 17

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

Псевдоклассы описывают характеристики элементов, такие как динамическое состояние — нажатая ссылка, язык кодировки — абзац на другом языке и т.д. Они не отображаются в исходном документе и не принадлежат дереву документа DOM (дереву документа принадлежат только сами html-элементы).

Без использования псевдоклассов изменить внешний вид по умолчанию и задать индивидуальный для каждого элемента можно только используя селектор — имя тега, класс или идентификатор элемента. Но как быть в случае, когда нужно выделить фоном каждую чётную строку таблицы? Прописывать классы вручную для каждой строки таблицы займёт много времени и значительно увеличит разметку. В такой ситуации на помощь приходит псевдокласс :nth-child(even), и с помощью селектора tr:nth-child(even)автоматически устанавливается фон для каждой чётной строки таблицы.

Рис. 1. Таблица-зебра с помощью класса и псевдокласса

В процессе взаимодействия пользователя со страницей html-элементы приобретают динамические характеристики. Например, когда вы переходите по ссылке, html-элемент <a>…</a> приобретает следующие свойства (характеристики):

1. Когда вы наводите на ссылку, она получает a:hover;

2. Когда вы уже перешли по ссылке — a:visited.

Доступ к таким динамическим характеристикам можно получить только с помощью псевдоклассов.

Таким образом, с помощью псевдоклассов можно получить доступ к информации, характеризующей элемент, которая не может быть получена с помощью простых селекторов — p {css-стили} или их комбинации — h1 + p {css-стили}.

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

Важно!

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

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

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

· Динамические псевдоклассы;

· Псевдоклассы пользовательского интерфейса;

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

· Псевдокласс отрицания :not();

Как это пишется в коде

Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору.

Псевдокласс будет определять только определённое состояние этого селектора.

Синтаксис выглядит следующим образом:

селектор:псевдокласс { }, например:

p:hover{

       background-color: red;

}

Этот код сделает фон красным у всех тегов <p>, но только в тот момент, когда на них будет наведен курсор мыши.

Важно!

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

А теперь давайте разберем каждый по подробней )))

Динамические псевдоклассы

Псевдокласс : link и :visited выбирают ссылки на странице, которые имеют атрибут href и находятся в определенном состоянии:

· :link — не посещенная ссылка;

· :visited — посещенная ссылка;

Синтаксис:

a:link {

color: #0000d0; /* Цвет ссылок */

}

a:visited {

color: #900060; /* Цвет посещенных ссылок */

}

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

· :focus — элементы которые активированы посредством курсора мыши или на которые перешли с помощью клавиатуры (кнопка TAB);

Синтаксис:

.form-text:focus {

background: #ffe;

border: 1px solid #29B0D9;

}

Псевдокласс : hover Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

· :hover — можно применять к всевозможным элементам, стили применяются при наведении пользователем на элемент;

div:hover {

background: #786b59;

color: #ffe;

}

Псевдокласс :active определяет стиль для активных элементов. Иными словами, стили будут срабатывать, когда на элементе нажата кнопка мыши.

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

123Следующая ⇒

Поделиться: