Арсений Форштретер: css-селекторы

CSS-селекторыАрсений Форштретер

разработчик интерфейсов

24 сентября, ШРИ, Екатеринбург

Селектор тега<div>Я див</div>

< p >А я абзац</p>

p { color: red; }

Я див

А я абзац

01.

02.

2

Универсальный селектор<div>Я див</div>

<p>А я абзац</p>

* { color: red; }

Я див

А я абзац

01.

02.

3

Важно!Используйте универсальный селектор с осторожностью!

4

Атрибуты<div id ="..." class ="...">...</div>

5

id<header id=" site-header ">Шапка сайта</header>

• id - строка, не содержащая пробельных символов.

• id должен быть уникальным.

6

Селектор идентификатора<header id=" site-header ">Шапка сайта</div>

#site-header {

background: green;

}

Шапка сайта

01.

02.

03.

7

Class<div class=" red ">Я — красный див</div>

• В отличие от id, не должен быть уникальным.

• У одного элемента может быть несколько классов!

<div class=" red bold ">А я — жирный красный див!</div>

9

Селектор класса<div class=" red ">Я — красный див</div>

<div class=" red bold ">А я — жирный красный див!</div>

.red { color: red; }

.bold { font-weight: bold; }

Я — красный див

А я — жирный красный див!

01.

02.

01.

02.

10

Давайте элементам осмысленныеимена идентификаторов и классов!

Сложные селекторы

12

Множественный селекторh1 { font-weight: bold; }

h2 { font-weight: bold; }

.heading { font-weight: bold; }

h1, h2, .heading {

font-weight: bold;

}

01.

02.

03.

01.

02.

03.

15

Селектор потомковol li { border-bottom: 2px solid green; }

<ol>

<li>Хлеб</li>

<li>Соль</li>

</ol>

01.

02.

03.

04.

16

Селектор потомковol li { border-bottom: 2px solid green; }

1. Хлеб

2. Соль

17

Комбинированные селекторы<div class="message">Сообщение</div>

<div class="message error">Ошибка</div>

.message { border: 2px solid blue; }

.message.error { border-color: red; }

Сообщение

Ошибка

01.

02.

01.

02.

18

Есть ли разница?.message.error { border-color: red; }

.error.message { border-color: red; }

01.

02.

19

НетПорядок простых селекторов в составе комбинированного ни на что

не влияет.

Как и порядок классов в атрибуте class.

20

Но!Селектор тега всегда первый:

p.foo { ... }

Ибо:

.foop { ... }

21

Комбинированные селекторы*.class == .class

23

Комбинированные селекторы*.class == .class

24

Какого цвета будет див?<div id="red" class="blue">;

Я таинственный див

</div>

#red { color: red; font-style: italic; }

.blue { color: blue; }

Я таинственный див

01.

02.

03.

01.

02.

25

А так?<div class="blue red">;

Я oчень таинственный див

</div>

.red { color: red; font-style: italic; }

.blue { color: blue; }

Я очень таинственный див

01.

02.

03.

01.

02.

26

Специфичность

0 1 2 1tag, ::pseudo-element

.class, :pseudo-class, [attr]#id

style="..."

28

Теперь понятно#red { color: red; } /* 0100 */

.blue { color: blue; } /* 0010 */

01.

02.

30

Теперь понятно.red { color: red; } /* 0010 */

.blue { color: blue; } /* 0010 */

01.

02.

31

Посчитаемp.note /* 0011 */

ul ol li /* 0003 */

#content p.note span /* 0112 */

#main #content .column /* 0210 */

<b style="..."></b> <!-- 1000 -->

01.

02.

03.

04.

05.

32

!importanta {

color: blue !important ;

font-weight: bold;

}

a.green { color: green; }

<a class="green" href="/">Зеленая ссылка</a>

01.

02.

03.

04.

34

!importanta {

color: blue !important ;

font-weight: bold;

}

a.green { color: green; }

Зеленая ссылка

01.

02.

03.

04.

35

ВажноИспользуйте !important с осторожностью!

36

Наследование<div class="grey">

Я — серый див, а внутри <i>курсив</i>

</div>

.grey { color: #666 }

Я — серый див, а внутри курсив

01.

02.

03.

37

Наследуемые свойства• Шрифты (font-*, line-height)

• Текст (text-*, letter-spacing)

• Цвет (color)

38

Но:<div class="grey">

Я — серый див, а внутри

<a href="http://yandex.ru">ссылка</a>

</div>

.grey { color: #666 }

Я серый див, а внутри ссылка

01.

02.

03.

04.

39

Где-то в недрах браузера:a { color: blue; }

40

Встроенные таблицы стилей1. Стили браузера

2. Стили пользователя

И стили автора.

41

Каскад1. Обходим дерево, берем конкретный элемент

2. Применяем унаследованные стили

3. Находим все правила, применимые к этому конкретному элементу

4. Разбиваем на 2 группы: с !important и без

42

Без !important• Сортируем правила по источнику:

1. Стили браузера

2. Стили пользователя

3. Стили автора

• Сортируем по специфичности

• Если специфичность одинаковая, то в порядке следования в таблицах

стилей

• Последовательно применяем

43

С !important• Опять сортируем по источнику (но уже в другом порядке!):

1. Стили автора c !important

2. Стили пользователя с !important

• Сортировка и применение правил аналогично предыдущему слайду

44

Пример<p>Абзац</p>

45

Примерp { color: black; } /* Браузер */

p { /* Пользователь */

color: yellow;

background: black !important;

}

p { /* Автор */

color: red;

background: blue !important;

}

01.

02.

03.

04.

05.

06.

07.

08.

09.

46

Результатp { color: black; } /* Браузер */

p { color: yellow; } /* Пользователь */

p { color: red; } /* Автор */

p { background: blue !important } /* Aвтор */

p { background: black !important; } /* Пользователь */

01.

02.

03.

04.

05.

47

Результатp { color: black; } /* Браузер */

p { color: yellow; } /* Пользователь */

p { color: red; } /* Автор */

p { background: blue !important } /* Aвтор */

p { background: black !important; } /* Пользователь */

Абзац

01.

02.

03.

04.

05.

48

Еще селекторы!

Атрибутные селекторыimg[alt] { ... }

<img src="" alt ="...">

50

Атрибутные селекторыinput[type=text] { ... }

<input type="text">

51

Атрибутные селекторы[attr^=value] - начинается с value

[attr$=value] - заканчивается value

[attr*=value] - содержит value

[attr~=value] - содержит value, отделенное пробелами

[attr|=value] - содержит value, отделенное знаком "-"

01.

02.

03.

04.

05.

52

Селектор детей<ol>

<li>Хлеб

<ul>

<li>Чёрный</li>

<li>Батон</li>

</ul>

</li>

<li>Соль</li>

</ol>

01.

02.

03.

04.

05.

06.

07.

08.

09.

53

Селектор детейol li { border-bottom: 2px solid green; }

1. Хлеб

• Чёрный

• Батон

2. Соль

54

Селектор детейol > li { border-bottom: 2px solid green; }

1. Хлеб

• Чёрный

• Батон

2. Соль

55

Селекторы соседей (Siblings selectors)• + - ближайший сосед

• ~ - последующие соседи

56

Ближайший сосед (Adjacent sibling)h1 + p { font-size: 1.5em; }

<h1>Заголовок</h1>

<p>Вводная часть</p>

<p>Текст</p>

01.

02.

03.

57

Ближайший сосед (Adjacent sibling)h1 + p { font-size: 1.5em; }

Заголовок

Вводная частьТекст

58

Последующие соседи (General siblings)h3 ~ p { font-size: 0.5em }

<p>Текст</p>

<h3>Заголовок третьего уровня</h3>

<p>Неважное дополнение</p>

<p>Совсем неважное дополнение</p>

01.

02.

03.

04.

59

Последующие соседи (General siblings)h3 ~ p { font-size: 0.5em }

Текст

Заголовок третьего уровняНеважное дополнение

Совсем неважное дополнение

60

Псевдоклассы• Состояние, вызванное действиями пользователя (:hover, :active, ...)

• Динамическое значение атрибутов (:disabled, :required, ...)

• Порядок на одном уровне вложенности (:first-child, ...)

• Другие особенности (:lang(), :not(), ...)

61

:hovera:hover { color: red; }

62

Состояние, вызванное действиямипользователя:active — активная ссылка или кнопка

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

:focus — поле ввода или ссылка в фокусе

:target — id элемента совпадает с хэшем в урле

...

01.

02.

03.

04.

05.

63

Динамическое значение атрибутов:link — ссылка, имеющая атрибут href

:disabled — неактивный инпут

:checked — выбранный чекбокс или радиокнопка

:required — обязательное поле

...

01.

02.

03.

04.

05.

64

Важно:checked != [checked]

65

Позиция на одном уровне вложенности

66

:first-childp:first-child { text-indent: 2em; }

<div>

<p>Раз</p>

<p>Два</p>

<p>Три</p>

</div>

01.

02.

03.

04.

05.

67

РезультатРаз

Два

Три

68

А что если ?<div>

<hr/>

<p>Раз</p>

<p>Два</p>

<p>Три</p>

</div>

01.

02.

03.

04.

05.

06.

69

Результат

Раз

Два

Три

70

:first-of-typep:first-of-type { text-indent: 2em; }

<div>

<hr/>

<p>Раз</p>

<p>Два</p>

<p>Три</p>

</div>

01.

02.

03.

04.

05.

06.

71

Результат

Раз

Два

Три

72

Ключевая разницаp:first-child сначала берет первый дочерний элемент, затем

проверяет, является ли он параграфом

p:first-of-type сначала берет все параграфы, затем берет

первый из них

73

А такжеp:last-child

p:last-of-type

p:only-child

p:only-of-type

01.

02.

03.

04.

74

Но и это еще не всё!p:nth-child(...)

p:nth-of-type(...)

01.

02.

75

:nth-child(), :nth-of-type()p:nth-child(2)

76

:nth-child(), :nth-of-type()li:nth-child(odd) — нечётные

li:nth-child(even) — чётные

01.

02.

77

:nth-child(), :nth-of-type()li:nth-child(odd) { background: #ccc }

<ol>

<li>Хлеб</li>

<li>Соль</li>

<li>Молоко</li>

<li>Сосиски</li>

</ol>

01.

02.

03.

04.

05.

06.

78

Результатli:nth-child(odd) { background: #ccc }

1. Хлеб

2. Соль

3. Молоко

4. Сосиски

79

:nth-child(), :nth-of-type()li:nth-child( 2n+1 ) { background: #ccc }

1. Хлеб

2. Соль

3. Молоко

4. Сосиски

80

:nth-child(), :nth-of-type()div:nth-child(2n+1) { background: #ccc; }

div:nth-of-type(2n+1) { color: red; }

<div>Див</div>

<span>Спан</span>

<div>Див</div>

<div>Див</div>

<div>Див</div>

01.

02.

01.

02.

03.

04.

05.

81

Результатdiv:nth-child(2n+1) { background: #ccc; }

div:nth-of-type(2n+1) { color: red; }

Див

Спан

Див

Див

Див

01.

02.

82

:not()img:not([alt])

83

Псевдоэлементы• Часть содержимого (::first-letter, ::first-line)

• Составные части полей ввода (::placeholder, ...)

• Generated content (::before, ::after)

84

Синтаксис псевдоэлементовСогласно последней спецификации, псевдоэлементы начинаются

с ::

В старой спецификации они начинаются с : , как и псевдоклассы

85

:first-letter<div class="ya">Яндекс</div>

.ya:first-letter { color: red }

Яндекс

87

:first-lineПрименимы следующие группы свойств:

• font-*, line-height

• text-*, word-spacing

• background-*

В зависимости от браузера список может варьироваться

88

::placeholder<input type="password" placeholder="Пароль" />

input::placeholder { color: green }

89

Generated contentПсевдоэлементы :before и :after

90

Generated content<div class="error">Ошибка! Не удалось загрузить данные</div>

Удобнее было бы так:

<div class="error">Не удалось загрузить данные</div>

91

Generated content<div class="error">Не удалось загрузить данные</div>

.error :before {

content: 'Ошибка! ';

color: red;

}

Ошибка! Не удалось загрузить данные

01.

02.

03.

04.

92

Полезные ссылки• bit.ly/15oqICU, bit.ly/1gVqV5H — W3C

• bit.ly/1b8EYYi — W3Schools

• caniuse.com

• bit.ly/1gVqlVH — CSS-Tricks Almanac

• bit.ly/1fxb8MB — Статья про специфичность на Smashing Magazine

• bit.ly/16Wi9mn — CSS Specifity Wars

93

Спасибо!