1. CSS-селекторы
Арсений Форштретер
разработчик интерфейсов
24 сентября, ШРИ, Екатеринбург

2. Селектор тега
<div>Я див</div>
< p >А я абзац</p>
p { color: red; }
Я див
А я абзац
01.
02.
2

3. Универсальный селектор
<div>Я див</div>
<p>А я абзац</p>
* { color: red; }
Я див
А я абзац
01.
02.
3

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

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

6. id
<header id=" site-header ">Шапка сайта</header>
• id - строка, не содержащая пробельных символов.
• id должен быть уникальным.
6

7. Селектор идентификатора
<header id=" site-header ">Шапка сайта</div>
#site-header {
background: green;
}
Шапка сайта
01.
02.
03.
7

9. Class
<div class=" red ">Я — красный див</div>
• В отличие от id, не должен быть уникальным.
• У одного элемента может быть несколько классов!
<div class=" red bold ">А я — жирный красный див!</div>
9

10. Селектор класса
<div class=" red ">Я — красный див</div>
<div class=" red bold ">А я — жирный красный див!</div>
.red { color: red; }
.bold { font-weight: bold; }
Я — красный див
А я — жирный красный див!
01.
02.
01.
02.
10

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

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

15. Множественный селектор
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

16. Селектор потомков
ol li { border-bottom: 2px solid green; }
<ol>
<li>Хлеб</li>
<li>Соль</li>
</ol>
01.
02.
03.
04.
16

17. Селектор потомков
ol li { border-bottom: 2px solid green; }
1. Хлеб
2. Соль
17

18. Комбинированные селекторы
<div class="message">Сообщение</div>
<div class="message error">Ошибка</div>
.message { border: 2px solid blue; }
.message.error { border-color: red; }
Сообщение
Ошибка
01.
02.
01.
02.
18

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

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

21. Но!
Селектор тега всегда первый:
p.foo { ... }
Ибо:
.foop { ... }
21

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

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

25. Какого цвета будет див?
<div id="red" class="blue">;
Я таинственный див
</div>
#red { color: red; font-style: italic; }
.blue { color: blue; }
Я таинственный див
01.
02.
03.
01.
02.
25

26. А так?
<div class="blue red">;
Я oчень таинственный див
</div>
.red { color: red; font-style: italic; }
.blue { color: blue; }
Я очень таинственный див
01.
02.
03.
01.
02.
26

28. Специфичность
0 1 2 1
tag, ::pseudo-element
.class, :pseudo-class, [attr]
#id
style="..."
28

30. Теперь понятно
#red { color: red; } /* 0100 */
.blue { color: blue; } /* 0010 */
01.
02.
30

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

32. Посчитаем
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

34. !important
a {
color: blue !important ;
font-weight: bold;
}
a.green { color: green; }
<a class="green" href="/">Зеленая ссылка</a>
01.
02.
03.
04.
34

35. !important
a {
color: blue !important ;
font-weight: bold;
}
a.green { color: green; }
Зеленая ссылка
01.
02.
03.
04.
35

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

37. Наследование
<div class="grey">
Я — серый див, а внутри <i>курсив</i>
</div>
.grey { color: #666 }
Я — серый див, а внутри курсив
01.
02.
03.
37

38. Наследуемые свойства
• Шрифты (font-*, line-height)
• Текст (text-*, letter-spacing)
• Цвет (color)
38

39. Но:
<div class="grey">
Я — серый див, а внутри
<a href="http://yandex.ru">ссылка</a>
</div>
.grey { color: #666 }
Я серый див, а внутри ссылка
01.
02.
03.
04.
39

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

41. Встроенные таблицы стилей
1. Стили браузера
2. Стили пользователя
И стили автора.
41

42. Каскад
1. Обходим дерево, берем конкретный элемент
2. Применяем унаследованные стили
3. Находим все правила, применимые к этому конкретному элементу
4. Разбиваем на 2 группы: с !important и без
42

43. Без !important
• Сортируем правила по источнику:
1. Стили браузера
2. Стили пользователя
3. Стили автора
• Сортируем по специфичности
• Если специфичность одинаковая, то в порядке следования в таблицах
стилей
• Последовательно применяем
43

44. С !important
• Опять сортируем по источнику (но уже в другом порядке!):
1. Стили автора c !important
2. Стили пользователя с !important
• Сортировка и применение правил аналогично предыдущему слайду
44

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

46. Пример
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

47. Результат
p { color: black; } /* Браузер */
p { color: yellow; } /* Пользователь */
p { color: red; } /* Автор */
p { background: blue !important } /* Aвтор */
p { background: black !important; } /* Пользователь */
01.
02.
03.
04.
05.
47

48. Результат
p { color: black; } /* Браузер */
p { color: yellow; } /* Пользователь */
p { color: red; } /* Автор */
p { background: blue !important } /* Aвтор */
p { background: black !important; } /* Пользователь */
Абзац
01.
02.
03.
04.
05.
48

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

50. Атрибутные селекторы
img[alt] { ... }
<img src="" alt ="...">
50

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

52. Атрибутные селекторы
[attr^=value] - начинается с value
[attr$=value] - заканчивается value
[attr*=value] - содержит value
[attr~=value] - содержит value, отделенное пробелами
[attr|=value] - содержит value, отделенное знаком "-"
01.
02.
03.
04.
05.
52

53. Селектор детей
<ol>
<li>Хлеб
<ul>
<li>Чёрный</li>
<li>Батон</li>
</ul>
</li>
<li>Соль</li>
</ol>
01.
02.
03.
04.
05.
06.
07.
08.
09.
53

54. Селектор детей
ol li { border-bottom: 2px solid green; }
1. Хлеб
• Чёрный
• Батон
2. Соль
54

55. Селектор детей
ol > li { border-bottom: 2px solid green; }
1. Хлеб
• Чёрный
• Батон
2. Соль
55

56. Селекторы соседей (Siblings selectors)
• + - ближайший сосед
• ~ - последующие соседи
56

57. Ближайший сосед (Adjacent sibling)
h1 + p { font-size: 1.5em; }
<h1>Заголовок</h1>
<p>Вводная часть</p>
<p>Текст</p>
01.
02.
03.
57

58. Ближайший сосед (Adjacent sibling)
h1 + p { font-size: 1.5em; }
Заголовок
Вводная часть
Текст
58

59. Последующие соседи (General siblings)
h3 ~ p { font-size: 0.5em }
<p>Текст</p>
<h3>Заголовок третьего уровня</h3>
<p>Неважное дополнение</p>
<p>Совсем неважное дополнение</p>
01.
02.
03.
04.
59

60. Последующие соседи (General siblings)
h3 ~ p { font-size: 0.5em }
Текст
Заголовок третьего уровня
Неважное дополнение
Совсем неважное дополнение
60

61. Псевдоклассы
• Состояние, вызванное действиями пользователя (:hover, :active, ...)
• Динамическое значение атрибутов (:disabled, :required, ...)
• Порядок на одном уровне вложенности (:first-child, ...)
• Другие особенности (:lang(), :not(), ...)
61

62. :hover
a:hover { color: red; }
62

63. Состояние, вызванное действиями
пользователя
:active — активная ссылка или кнопка
:visited — посещенная ссылка
:focus — поле ввода или ссылка в фокусе
:target — id элемента совпадает с хэшем в урле
...
01.
02.
03.
04.
05.
63

64. Динамическое значение атрибутов
:link — ссылка, имеющая атрибут href
:disabled — неактивный инпут
:checked — выбранный чекбокс или радиокнопка
:required — обязательное поле
...
01.
02.
03.
04.
05.
64

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

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

67. :first-child
p:first-child { text-indent: 2em; }
<div>
<p>Раз</p>
<p>Два</p>
<p>Три</p>
</div>
01.
02.
03.
04.
05.
67

68. Результат
Раз
Два
Три
68

69. А что если ?
<div>
<hr/>
<p>Раз</p>
<p>Два</p>
<p>Три</p>
</div>
01.
02.
03.
04.
05.
06.
69

70. Результат
Раз
Два
Три
70

71. :first-of-type
p:first-of-type { text-indent: 2em; }
<div>
<hr/>
<p>Раз</p>
<p>Два</p>
<p>Три</p>
</div>
01.
02.
03.
04.
05.
06.
71

72. Результат
Раз
Два
Три
72

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

74. А также
p:last-child
p:last-of-type
p:only-child
p:only-of-type
01.
02.
03.
04.
74

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

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

77. :nth-child(), :nth-of-type()
li:nth-child(odd) — нечётные
li:nth-child(even) — чётные
01.
02.
77

78. :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

79. Результат
li:nth-child(odd) { background: #ccc }
1. Хлеб
2. Соль
3. Молоко
4. Сосиски
79

80. :nth-child(), :nth-of-type()
li:nth-child( 2n+1 ) { background: #ccc }
1. Хлеб
2. Соль
3. Молоко
4. Сосиски
80

81. :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

82. Результат
div:nth-child(2n+1) { background: #ccc; }
div:nth-of-type(2n+1) { color: red; }
Див
Спан
Див
Див
Див
01.
02.
82

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

84. Псевдоэлементы
• Часть содержимого (::first-letter, ::first-line)
• Составные части полей ввода (::placeholder, ...)
• Generated content (::before, ::after)
84

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

87. :first-letter
<div class="ya">Яндекс</div>
.ya:first-letter { color: red }
Яндекс
87

88. :first-line
Применимы следующие группы свойств:
• font-*, line-height
• text-*, word-spacing
• background-*
В зависимости от браузера список может варьироваться
88

89. ::placeholder
<input type="password" placeholder="Пароль" />
input::placeholder { color: green }
89

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

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

92. Generated content
<div class="error">Не удалось загрузить данные</div>
.error :before {
content: 'Ошибка! ';
color: red;
}
Ошибка! Не удалось загрузить данные
01.
02.
03.
04.
92

93. Полезные ссылки
• 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

94. Спасибо!