Введение в веб-разработку с HTML, CSS, JavaScript

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

Теперь, нужно отметить, что эти комбинации селекторов не ограничиваются селекторами элементов. Так, например, у нас может быть комбинация .colored p элемента с классом, или комбинация класса с классом.

Помимо простых селекторов (выбор элементов на основе тега, идентификатора, класса), есть также селекторы псевдоклассов, которые выбирают элементы на основе определенного их состояния.

Селекторы псевдоклассов дают возможность стилизации документа на основе взаимодействия пользователя со страницей. Например, мы можем сделать так, чтобы стиль элемента менялся, когда пользователь наводит курсор мыши на элемент.

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

Например, селектор ссылок «:link» стилизует не посещенные ссылки. Здесь мы окрашиваем не посещенную ссылку в желтый цвет.

Также мы можем стилизовать посещенную ссылку с помощью селектора «:visited».

Селектор «:hover» используется для выбора и стилизации элементов при наведении на них курсора мыши. И селектор «:hover» можно использовать для любых элементов, а не только для ссылок или кнопок.

При использовании селектора «:hover» для ссылок, он должен идти после селекторов «:link» и «:visited» в определении CSS.

Селектор «:active» используется для выбора и стилизации активной ссылки, т.е. ссылки при нажатии на нее. Хотя селектор «:active» можно использовать для всех элементов, а не только для ссылок.

При использовании селектора «:active», он должен идти после селектора «:hover» в определении CSS, что соответствует логики действий пользователя.

Селектор «:nth-child(n)» выбирает каждый элемент, который является n-м дочерним элементом своего родителя. При этом n может быть числом, ключевым словом (четный или нечетный, odd или even) или формулой, например (an + b), где a представляет размер цикла, n – счетчик (начиная с 0), а b – значение смещения.

В этом примере, элемент «This is some text.