Продвинутые CSS-селекторы, о которых вы не знали

В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к коду, чтобы добавить эти? К счастью существуют динамические селекторы, которые являются единственным решением в этой ситуации.

Введение

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента (CSS или JavaScript) браузеру приходиться «обойти» весь DOM страницы, чтобы найти нужный.

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class. Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

Селекторы атрибутов

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS, значение которого заканчивается определенным символом (суффиксом) выглядит следующим образом:

div[id$=“_myDiv”] {
  // CSS правило
}

Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Пример:

<!-- HTML -->
<div id="0125_LoginPanel"> 
  Какой-то текст 
</div>

Чтобы выбрать этот элемент div, нужно использовать следующий селектор:

div[id$="_LoginPanel"] {
  margin: 0 3em;
  padding: 1em;
}

Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:

div[id$=“myDynamicDiv”] {
  // CSS правила
}

Этот селектор можно использовать для любых элементов (div, span, img и т.д.), а также любых их атрибутов (id, name, value и class HTML CSS).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ($=):

<!-- HTML -->
<div class="myPanel_1435">
  <h1>My custom panel</h1>
</div>

Селектор будет выглядеть следующим образом:

div[class^="myPanel_"] {
  // CSS правила
}

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.

(* =) — атрибут содержит некоторое значение

Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:

<div class="1gdug_logoutPanel_4828fde">
  <h1>Какой-то текст</h1>
  <form>...</form>
</div>

Выбор этого элемента будет выглядеть следующим образом:

div[class*="logoutPanel"] {
 // CSS правила
}

Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:

<!-- HTML -->
<div class=“3453_mydynamicdiv”>
  <h1>My Dynamic Div</h1>
</div>

Можно обратиться к элементу div, используя указанный выше атрибут = или через атрибут класса:

// 1-й способ – выбор конкретного элемента класса
div[class="3453_mydynamicdiv"] {
  // CSS правила
}

// 2-й способ – выбор всех элементов класса
.3453_mydynamicdiv {
  // CSS правила
}

Краткий обзор селекторов атрибутов:

  • = значение атрибута эквивалентно определённым символам;
  • $= значение атрибута оканчивается определенными символами;
  • ^= значение атрибута начинается с определенных символов;
  • *= значение атрибута содержит определенные символы.

Псевдоклассы селекторов

Перед тем, как задать параметры class в CSS, нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:

a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}
// вы поняли

Это удобно, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии.

Псевдокласс :not(x)

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

<ul class="nav">
 <li>Blog</li>
 <li>About</li> 
 <li>Videos</li>
 <li class="highlight">Music</li>
 <li>Merch</li>
</ul>

С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:

.nav li:not(.highlight) {
  margin: 0 1em 0 0;
  padding: 5px 16px;
  display: inline-block;
}

Можно пойти дальше и выбирать любые атрибуты.

Например:

input:not([disabled])

Псевдоэлемент ::first-letter

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

p::first-letter {
  // стиль буквы
}

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):

p:first-child::first-letter {
 // добавляем стили только к первой букве первого абзаца текста
}

Этот подход освобождает от необходимости использования JavaScript.

Псевдокласс :first-of-type

Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class:

article:first-of-type {
  margin-top: 0;
}

Псевдокласс :last-of-type

:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:

article:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

Заключение

Вы познакомились с «продвинутыми» CSS class selector, о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.

Перевод статьи “Advanced CSS Selectors you never knew about” был подготовлен дружной командой проекта Сайтостроение от А до Я.