Upload
yandex
View
3.202
Download
4
Embed Size (px)
DESCRIPTION
Citation preview
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
Спасибо!