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

Хорошо, что элементы на странице возможно выбирать не только с помощью идентификаторов и классов. В CSS существуют селекторы атрибутов, которые в нашем случае, являются единственным подходящим решением. С их помощью вы можете обратиться к элементам, у которых значение атрибута содержит определенные символы в начале, посередине или в конце, в зависимости от того, как сгенерирован HTML-код.

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

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

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

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

CSS

div[id$="myDiv"] { 
// CSS правила 
}

Обратите внимание, что вместо элемента div вы можете указать любой другой HTML-элемент. Этот пример идеально подойдет для выборки элементов на странице, если суффикс внутри атрибутов формируется динамически. Пример:

HTML

<div id="0125_LoginPanel"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

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

CSS

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

Так как мы нацелены на определенное значение суффикса в атрибуте id, нам необходимо указать его в скобках, а в имени атрибута использовать $.

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

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

Значение атрибута начинается с определенных символов (^=)

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

Пример:

HTML

<div class="myPanel_1435">
  <h1> Lorem ipsum dolor </h1> 
</div>

CSS

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

Довольно просто, неправда ли? Единственное отличие двух описанных селекторов состоит в том, что перед знаком равно (=), находятся разные символы. Как вы могли заметить, в этом примере использован атрибут class, вместо id. CSS – довольно «гибкий» инструмент, он позволяет обращаться к элементам на странице различными способами, используя разные атрибуты.

Значение атрибута содержит определенные символы (*=)

Как быть, если и префикс и суффикс атрибутов генерируется динамически? Решением в данном случае является поиск элемента, значение атрибута которого содержит определённые символы независимо от того, где они находятся.

HTML

<div class="1gdug_logoutPanel_4828fde"> 
  <h1> Lorem ipsum dolor </h1> 
  <form>...</form> 
</div>

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

CSS

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

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

Значение атрибута эквивалентно определенным символам (=)

Это еще один способ выбора элемента с определенным значением идентификатора, класса, атрибутов name, value и тп.

HTML

<div class="3453_mydynamicdiv">
  <h1> Lorem ipsum dolor</h1> 
</div>

Вы можете обратиться к элементу (div c классом 3453_mydynamicdiv) двумя различными способами: используя указанный выше атрибут, а также стандартным способом через атрибут класса.

CSS

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

Итак, подытожим. В статье были рассмотрены следующие селекторы атрибутов:

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

Псевдоклассы CSS

Все псевдоклассы CSS начинаются с двоеточия. Обычно они используются для выборки элементов в зависимости от их состояния, либо положения на странице.

CSS

a:hover {} 
a:active {} 
a:focus {} 
a:visited {} 
:checked {} 
:first-child {} 
:last-child {} 

Псевдоклассы бывают очень полезными в случае, когда необходимо получить доступ к каким-либо элементам, находящимся в определенном состоянии. В этой статье мы не будет рассматривать все псевдоклассы CSS (если вам интересно, ознакомьтесь со статьей Криса Койера), остановимся лишь на основных моментах, которые будут полезны при решении сложных задач без использования дополнительных инструментов (например, JavaScript), а только при помощи HTML и CSS.

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

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

HTML

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

В этом примере выбираются все элементы списка за исключением элемента с классом hightlight.

CSS

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

Вы можете выбирать любые элементы на основе различных атрибутов. Например:

CSS

input:not([disabled])

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

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

CSS

p::first-letter { 
 // CSS правила
}

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

CSS

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

Этот подход освобождает вас от использования решений на JavaScript или каких-либо CSS-хаков.

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

Псевдокласс :first-of-type используется довольно часто при стилизации HTML-элементов. Он позволяет выбрать первый элемент определенного типа внутри родительского элемента и применить к нему CSS-правила.

CSS

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

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

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

CSS

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

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

Вы можете ознакомиться со справочником по таблицам стилей. В нем представлен довольно широкий список CSS свойств. Также не помешает прочитать статью о селекторах псевдоклассов для их более детального изучения.

Оригинал статьи: https://medium.com/the-web-crunch-publication/advanced-css-selectors-you-never-knew-about-972d8275d079#.cqbl5dr9r