CSS-селекторы презентация

Занятие на тему:
CSS selectors
Горбачевский Валерий

3
Основные селекторы
Селекторы потомков/детей
Селекторы соседей
Селекторы атрибутов
Псевдоклассы
Псевдоэлементы.

Основные селекторы:
4
* - все элементы
div - тег
.class - класс
#id - идентификатор

Как работает *
5

Как работает селектор по тегам
6

Как работает селектор по классам
7

Как работает селектор по идентификатору
8

Селекторы потомков/детей
9
div p - все потомки
div > p - все дети

Селектор потомков
10

Селектор детей
11

Селектор соседей
12
div + p - первый непосредственный сосед
div ~ p - все последующие соседи

Селектор первого соседа
div + p
13

Селектор следующих соседей div ~ p
14

Селекторы по атрибут
15
[class] - тег содержит данный атрибут
[class="box"] - конкретное значение атрибута
[class~="box"] - атрибут содержит данное слово
[class^="box"] - значение атрибута начинается с данной последовательности символов
[href$=".pdf"] - значение атрибута заканчивается на данную последовательность символов
[class*="box"] - значение атрибута содержит данную последовательность символов

Селектор атрибута
[attribute-name]
16

Селектор с конкретным значением атрибута [class="paragraph"]
17

Атрибут содержит определенное слово [class~="first"]
18

Первые символы атрибута
[class^="box"]
19

Последние символы атрибута
[href$="pdf"]
20

Последовательность символов в атрибуте [class*="box"]
21

Псевдоклассы
22
:link
:hover
:active
:visited
:first-child
:last-child
:only-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:focus
:enabled
:disabled
:checked
:first-of-type
:last-of-type
:only-of-type
:target
:empty
:not(.awesome)

:link, :hover, :active, :visited
23

:focus, :enabled, :disabled, :checked
24
Open on CODEPEN

:first-child, :last-child, :only-child
25

:first-of-type, :last-of-type, :only-of-type
26

:nth-child(n), :nth-last-child(n),
:nth-of-type(n), :nth-last-of-type(n)
27

:target, :empty, :not(selector)
28

Псевдоэлементы
29
:first-letter
:first-line
:before
:after
::selection

:first-letter, :first-line
30

:before, :after
31

::selection
32