Пора нам начать изучать новый CSS, не так ли?
Мы все привыкли к новым функциям, внедряемым в фреймворки слева и справа, но мы часто забываем, что новые функции постоянно разрабатываются на основных веб-языках, которые мы используем каждый день.
Проект редактора W3C
Проект CSS Selectors Level 4 от 15 января обрисовывает в общих чертах основные возможности CSS.
Прежде чем мы начнем, вы должны знать: CSS, который вы найдете в этой статье сегодня, в основном не будет работать в любом браузере. Даже самое новое из нового. Причина этого в том, что черновик — это именно черновик. Это четвертая версия черновика 4-го уровня, начатая еще в 2011 году. Селекторы, предложенные в черновике, являются спецификацией для новых селекторов, которые предлагаются редакторами самого документа, путем обдумывания и сотрудничества с люди из сообщества, которые участвуют в списке рассылки W3C.
Так что это значит? Это означает, что в относительно ближайшем будущем мы, вероятно, увидим, что многие из этих функций будут реализованы, и многие из них будут реализованы в таких версиях браузеров, как Chrome и Firefox.
Давайте посмотрим на некоторые из новых селекторов!
1 .: нет (.warning, .alert)
Мы уже видели селектор :not селекторах третьего уровня. Однако текущий черновик селектора уровня 4 :not допускает использование нескольких аргументов с более сложным соответствием.
Ранее :not можно было использовать только с одним селектором и нельзя объединять. Например, уровень 3 :not может выглядеть так:
|
1
2
3
|
a:not([href*=»somesite.com»]) {
}
|
Это позволит выбрать все теги привязки, у которых нет href включая строку "somesite.com" . Но с новым проектом мы можем сделать больше интересных вещей.
Вскоре мы рассмотрим :has , но пока, вот селектор, который выбирает все ссылки, которые не являются прямыми потомками элементов с классом col или классом, который начинается с col (как классы сетки Bootstrap col-md-4 ) , Он также будет игнорировать якоря, которые имеют элементы img в качестве потомков.
|
1
2
3
|
a:not([class|=»col»]>a, :has(img)) {
}
|
Этот селектор также позволяет нам делать такие вещи, как:
|
1
2
3
|
div:not(div+div) {
}
|
При этом выбираются все элементы div, которые не являются ближайшими родственниками других элементов div.
Взять это еще дальше
С добавлением псевдокласса :nth-last-child мы можем также делать такие вещи:
|
1
2
3
|
div:not(.container>div:nth-last-child(-n+2)) {
}
|
Это позволит выбрать все элементы div, кроме тех, которые являются прямыми потомками элементов .container и являются последними двумя братьями и сестрами.
Как видите, эти правила могут стать очень мощными и сложными; но давайте добавим еще больше гибкости, введя псевдоселектор :has .
2 .: имеет (div, p,> a)
Псевдо-селектор :has позволяет вам выбирать элементы с переданными аргументами как дочерние. Например, чтобы выбрать все якорные ссылки, у которых элементы изображения являются дочерними, вы должны использовать следующий синтаксис:
|
1
2
3
|
a:has(img) {
}
|
Однако :has не ограничивается простыми селекторами. Вы можете комбинировать :has с :not и :nth-* селекторы для создания довольно сложных реляционных селекторов.
Например, давайте выберем элементы table которые имеют более десяти строк:
|
1
2
3
|
table:has(tr:nth-of-type(11)) {
}
|
Сочетание: имеет () и: не ()
Как насчет выбора элемента body , последний дочерний элемент которого не является нижним колонтитулом?
|
1
2
3
|
body:not(:has(footer:last-child)) {
}
|
3 .: любая ссылка
В настоящее время мы можем таргетировать гиперссылки, используя :link и :visited Это больше, чем просто использование селектора, так как он проверяет наличие href и проверяет историю просмотров пользователя, чтобы определить, была ли посещена данная ссылка.
|
1
2
3
|
:link, :visited {
color: blue;
}
|
С предложенными селекторами уровня 4 мы могли бы стилизовать все ссылки, посещенные или нет, используя :any-link . Вышеуказанный стиль относительно эквивалентен:
|
1
2
3
|
:any-link {
color: blue;
}
|
4 .: область действия
До селекторов уровня 4 CSS был предоставлен глобальный охват. Другими словами, если вы добавите следующий CSS:
|
1
2
3
|
div {
color: #444;
}
|
все div получат правило стиля color: #444 . (Предполагается, что никакие другие конкурирующие стили не применяются.) Селекторы уровня 4 позволяют использовать таблицы стилей и теги стилей для элемента:
|
01
02
03
04
05
06
07
08
09
10
11
|
<section>
<h2>This is outside the scope.</h2>
<aside>
<style scoped>
h2 {
font-size: 2rem;
}
</style>
<h2>This is within the scope</h2>
</aside>
</section>
|
В этом примере мы применили область действия к тегу стиля внутри элемента aside . Правила в этом теге стиля будут применяться только к потомкам родительского элемента style .
5 .: совпадения (селектор1, селектор2)
Псевдоселектор :matches позволяет нам проверить, соответствует ли элемент списку элементов. Например, если вы хотите настроить таргетинг на все теги привязки, абзаца и h2 внутри статьи, это можно сделать с помощью следующего:
|
1
2
3
|
article :matches(h2, a, p) {
}
|
Это заменяет ранее гораздо более подробный синтаксис:
|
1
2
3
|
article a, article h2, article p {
}
|
Примечание . Начиная с этой версии черновика,: :matches() нельзя использовать с :not :has или другим вложенным :matches .
6. Явный Селектор Селектора >>
Вы, вероятно, знакомы с символом пробела, позволяющим нам писать правила-потомки, такие как все якоря внутри div:
|
1
2
3
|
div a {
}
|
Но до сих пор мы не видели явного селектора потомков. С селекторами уровня 4 у нас есть один: >> .
Тем не менее, обратите внимание, что это приводит к ненужным дополнительным символам в вашем CSS, так как вы можете достичь того же эффекта с одним символьным пространством, поэтому будьте осторожны при его использовании. Предположительно, он действует как мост между непосредственным дочерним селектором > и селектором теневого доступа >>> .
7. Таблица в столбце выбора ||
Этот селектор является желанным дополнением для оформления таблицы. Давайте посмотрим на некоторую разметку для базовой таблицы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<table>
<colgroup>
<col class=»id»>
<col class=»personnel-info» colspan=»2″>
</colgroup>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<span class=»c»><!— etc —>
</tr>
</tbody>
</table>
|
Стилизация горизонтально сгруппированных элементов (т.е. внутри одной строки) исторически была относительно простой для выполнения. Стилизация элементов, сгруппированных по вертикали — это совсем другая игра с мячом.
Чтобы стилизовать все элементы, являющиеся частью столбца, с помощью класса personnel-info , мы могли бы добавить больше классов к разметке и напрямую стилизовать их, или, глядя на селекторы уровня 4, мы могли бы использовать || селектор. || Селектор позволяет вам точно ориентироваться на эти элементы td следующим образом:
|
1
2
3
|
.personnel-info ||
}
|
Вывод
Это завершает наш обзор некоторых новых функций, появившихся в селекторах уровня 4! Этот мощный, сохраняющий байты новый набор инструментов не полностью зафиксирован, но браузеры начинают реализовывать их в своих ранних экспериментальных формах, так что следите за обновлениями спецификации. Конечно, когда они будут оформлены, мы расскажем о них здесь, на Tuts +!
Соответствующие ссылки
Ознакомьтесь с нашим курсом «CSS будущего» , в котором, помимо прочего, Крейг Кэмпбелл рассказывает: