Селектор

Пример

Описание примера

CSS

.class

.intro

Выбирает все элементы класса"intro"

1

#id

#firstname

Выбирает элемент с id="firstname"

1

*

*

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

2

element

p

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

1

element,element

div,p

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

и

1

element element

div p

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

внутри элементов

1

element>element

div>p

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

, где родитель - элемент

2

element+element

div+p

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

, которые стоят  после элементов

2

element1~element2

p~ul

Выбирает каждый элемент

, перед которым стоит элемент

3

[attribute]

[target]

Выбирает все элементы с атрибутом target

2

[attribute=value]

[target=_blank]

Выбирает все элементы с target="_blank"

2

[attribute~=value]

[title~=flower]

Выбирает все элементы с атрибутом заголовка, в котором содержится слово "flower"

2

[attribute|=value]

[lang|=en]

Выбирает все элементы со значением атрибута lang, которые начинаются с "en"

2

[attribute^=value]

a[href^="https"]

Выбирает каждый элемент  чьё значение аттрибута href начинается с "https"

3

[attribute$=value]

a[href$=".pdf"]

Выбирает каждый элемент , атрибут href которого заканчиваеается на ".pdf"

3

[attribute*=value]

a[href*="w3schools"]

Выбирает каждый элемент , значение атрибута href которого содержит строку "w3schools"

3

:active

a:active

Выбирает активную ссылку

1

::after

p::after

Добавляет содержимое после каждого элемента

2

::before

p::before

Добавляет содержимое перед каждым элементом

2

:checked

input:checked

Выбирает каждый включённый элемент 

3

:disabled

input:disabled

Выбирает каждый отключенный элемент 

3

:empty

p:empty

Выбирает каждый элемент

, у которого нет никаких дочерних элементов (включая текстовые узлы)

3

:enabled

input:enabled

Выбирает каждый включенный элемент 

3

:first-child

p:first-child

Выбирает каждый элемент

, который является первым дочерним элементом его родителя

2

::first-letter

p::first-letter

Выбирает первую букву каждого элемента

1

::first-line

p::first-line

Выбирает первую строку каждого элемента

1

:first-of-type

p:first-of-type

Выбирает каждый элемент

, который является первым элементом

 его родителя

3

:focus

input:focus

Выбирает Input элемент, на котором фокусируются

2

:hover

a:hover

Ссылка при  наведении мыши

1

:in-range

input:in-range

Выбирает элементы input со значением в пределах указанного диапазона

3

:invalid

input:invalid

Выбирает все элементы input с недопустимым значением

3

:lang(language)

p:lang(it)

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

с атрибутом lang, равным "it" (Italian)

2

:last-child

p:last-child

Выбирает каждый

элемент, который является последним дочерним элементом его родителя

3

:last-of-type

p:last-of-type

Выбирает каждый

элемент, который является последним

элементом его родителя

3

:link

a:link

Выбирает все непосещаемые ссылки

1

:not(selector)

:not(p)

Выбирает каждый элемент, который не является элементом

3

:nth-child(n)

p:nth-child(2)

Выбирает каждый

элемент, который является вторым дочерним элементом его родителя

3

:nth-last-child(n)

p:nth-last-child(2)

Выбирает каждый

элемент, который является вторым дочерним элементом его родителя, рассчёт ведётся от последнего дочернего элемента

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

Выбирает каждый элемент

, который является вторым элементом

его родителя, расчёт ведётся от последнего дочернего элемента

3

:nth-of-type(n)

p:nth-of-type(2)

Выбирает каждый элемент

, который является вторым элементом

его родителя

3

:only-of-type

p:only-of-type

Выбирает каждый элемент

, который является единственным элементом

его родителя

3

:only-child

p:only-child

Выбирает каждый элемент

, который является единственным дочерним элементом его родителя

3

:optional

input:optional

Выбирает входные элементы без атрибута "required"

3

:out-of-range

input:out-of-range

Выбирает входные элементы со значением вне указанного диапазона

3

:read-only

input:read-only

Выбирает входные элементы с назначенным атрибутом "readonly"

3

:read-write

input:read-write

Выбирает входные элементы с не назначенным атрибутом "readonly"

3

:required

input:required

Выбирает элементы с атрибутом "required"

3

:root

:root

Выбирает корневой элемент документа

3

::selection

::selection

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

:target

#news:target

Выбирает активный в настоящее время элемент #news (кликнули по url который содержит имя анкора)

3

:valid

input:valid

Выбирает все элементы input с допустимым значением

3

:visited

a:visited

Выбирает все посещённые ссылки

1