Статьи

Селекторы уровня 4 CSS, на которые стоит обратить внимание

Пора нам начать изучать новый CSS, не так ли?

Мы все привыкли к новым функциям, внедряемым в фреймворки слева и справа, но мы часто забываем, что новые функции постоянно разрабатываются на основных веб-языках, которые мы используем каждый день.

Проект CSS Selectors Level 4 от 15 января обрисовывает в общих чертах основные возможности CSS.

Прежде чем мы начнем, вы должны знать: CSS, который вы найдете в этой статье сегодня, в основном не будет работать в любом браузере. Даже самое новое из нового. Причина этого в том, что черновик – это именно черновик. Это четвертая версия черновика 4-го уровня, начатая еще в 2011 году. Селекторы, предложенные в черновике, являются спецификацией для новых селекторов, которые предлагаются редакторами самого документа, путем обдумывания и сотрудничества с люди из сообщества, которые участвуют в списке рассылки W3C.

Так что это значит? Это означает, что в относительно ближайшем будущем мы, вероятно, увидим, что многие из этих функций будут реализованы, и многие из них будут реализованы в таких версиях браузеров, как Chrome и Firefox.

Давайте посмотрим на некоторые из новых селекторов!

Мы уже видели селектор :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 .

Псевдо-селектор :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)) {
     
}

В настоящее время мы можем таргетировать гиперссылки, используя :link и :visited Это больше, чем просто использование селектора, так как он проверяет наличие href и проверяет историю просмотров пользователя, чтобы определить, была ли посещена данная ссылка.

1
2
3
:link, :visited {
   color: blue;
}

С предложенными селекторами уровня 4 мы могли бы стилизовать все ссылки, посещенные или нет, используя :any-link . Вышеуказанный стиль относительно эквивалентен:

1
2
3
:any-link {
   color: blue;
}

До селекторов уровня 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 .

Псевдоселектор :matches позволяет нам проверить, соответствует ли элемент списку элементов. Например, если вы хотите настроить таргетинг на все теги привязки, абзаца и h2 внутри статьи, это можно сделать с помощью следующего:

1
2
3
article :matches(h2, a, p) {
     
}

Это заменяет ранее гораздо более подробный синтаксис:

1
2
3
article a, article h2, article p {
     
}

Примечание . Начиная с этой версии черновика,: :matches() нельзя использовать с :not :has или другим вложенным :matches .

Вы, вероятно, знакомы с символом пробела, позволяющим нам писать правила-потомки, такие как все якоря внутри div:

1
2
3
div a {
     
}

Но до сих пор мы не видели явного селектора потомков. С селекторами уровня 4 у нас есть один: >> .

Тем не менее, обратите внимание, что это приводит к ненужным дополнительным символам в вашем CSS, так как вы можете достичь того же эффекта с одним символьным пространством, поэтому будьте осторожны при его использовании. Предположительно, он действует как мост между непосредственным дочерним селектором > и селектором теневого доступа >>> .

Этот селектор является желанным дополнением для оформления таблицы. Давайте посмотрим на некоторую разметку для базовой таблицы:

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 будущего» , в котором, помимо прочего, Крейг Кэмпбелл рассказывает: