Основні селектори (обов’язково потрібно знати)

Селектор

Пример

Описание

Статус

#идентификатор

#el1

Выберет все элементы на странице, которые имеют идентификатор el1 (которые имеют атрибут id='el1').

-

.класс

.group1

Выберет группу элементов на странице, которые имеют класс group1 (которые имеют атрибут class='group1').

-

элемент

p

Выберет все абзацы на странице.

-

*

*

Выберет все элементы на странице.

-

:hover

a:hover

Выберет ссылку, на которую наведен курсор мыши.

(возможное использование не толлько с ссылками но и с другими елементами)

-

:active

a:active

Выберет все активные в данный момент ссылки (на которые щелкнули мышкой).

-

:first-child

p:first-child

Выберет все абзацы, которые являются первыми в родительском элементе.

-

:last-child

div:last-child

Позволяет выбрать все элементы div являющиеся последними элементами потомками в родительском.

новый

:first-line

p:first-line

Оформит первую сточку всех абзацев на странице.

-

:first-letter

p:first-letter

Оформит первую букву всех абзацев на странице.

-

эл1 эл2

div p

Выберет все абзацы являющиеся потомками элемента div.

-

эл1 > эл2

div > p

Выберет все абзацы являющиеся потомками элемента div.

-

эл1 + эл2

div + p

Выберет все абзацы следующие после элемента div.

-

элемент1~элемент2

div~p

Выберет все элементы div находящиеся перед элементом p.

новый

:before

p:before

Вставит произвольное содержимое перед элементом p.

-

:after

p:after

Вставит произвольное содержимое после элемента p.

-

:focus

input:focus

Выберет все активные элементы ввода на странице.

-

:nth-child(x)

div:nth-child(3)

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

новый