Расширенные селекторы CSS, о которых нужно знать

С помощью CSS можно создавать поистине потрясающие сайты. А правильный подход к использованию стилей позволяет реализовать практически любые идеи в веб-дизайне. И одним из главных моментов здесь является эффективное использование селекторов. С помощью селекторов можно придать уникальные стили даже самым «отдаленным» элементам в DOM. Но иногда бывает так, что обычные селекторы не подходят для решения этой задачи. Например, когда код, и соответственно элементы DOM, генерируется динамически.

К счастью для верстальщиков, доступ к некоторым динамическим селекторам можно получить, используя расширенные селекторы CSS. Расширенные селекторы в CSS – это ссылка на элемент HTML по его префиксу, суффиксу или по чему-то среднему. И данную статью мы посвящаем рассмотрению расширенных селекторов, которые сегодня используются в CSS-стилях.

 

 

Частичные селекторы

К наиболее часто используемым частичным селекторам относятся следующие:

  • ^= начинается с
  • $= заканчивается на
  • *= содержит

 

  1. Селектор по элементу, который начинается с… (^="условие")

Вы можете выбирать элементы из DOM по префиксу (начальным знакам). Например, если класс у элемента формируется динамически, но первые несколько знаков являются уникальными, тогда вам подойдет этот расширенный селектор. Пример HTML кода:

<div class="block-id_12345">    <h3>Custom block</h3>  </div>  

 

В этом случае вы можете использовать расширенный селектор по префиксу элемента, например:

div[class^="block-id_"] {    //код CSS  }  

 

Первое, что нужно отметить о расширенном селекторе и его синтаксисе – это div с квадратными скобками, окружающими атрибут class. Тег div может быть любым элементом в DOM от input до span и т.д. Далее идет расширенный селектор, его вид ^="условие", где условиеа – это префикс элемента (в нашем примере это block-id_).

 

 

  1. Селектор по элементу, который заканчивается на… ($="условие")

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

span[id$="_12345"] {    //код CSS  }  

 

Вы можете делать выборку для любого элемента (div, span, img и т.д.), а также для любого общего атрибута (id, name, value и т.д.).

 

 

  1. Селектор по элементу, который содержит… (*="условие")

Что делать, если у вас и префикс и суффикс формируется динамически? В этом случае вам подойдет такой расширенный CSS селектор. Пример HTML кода:

<div class="ads2505_block-id_12345">    <h3>Custom block</h3>  </div>  

 

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

div[class*="block-id"] {    //код CSS  }  

 

 

Селекторы по псевдо-элементам и псевдо-классам

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

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

 

Часть из этих селекторов мы уже рассматривали здесь.  Сегодня мы рассмотрим несколько других псевдо-селекторов.

 

 

:not(x)

С помощью этого псевдо-селектора можно добавлять стили для элементов, которые не содержат заданный селектор (x). Его полезно использовать для однотипных элементов, которые имеют похожие свойства. Пример HTML кода:

<ul class="nav">    <li>Home</li>    <li>About</li>    <li class="active">Shop</li>    <li>Contacts</li>  </ul>  

 



С помощью этого селектора псевдо-класса можно добавить стили для всех элементов списка меню, кроме элемента с определенным классом, например:

.nav li:not(.active) {    //код CSS  }  

 

Также этот селектор можно использовать и для выбора атрибута, например:

input:not([disabled]) {    //код CSS  }  

 

 

::first-letter

С помощью этого селектора псевдо-класса вы можете указать определенные стили для первой буквы абзаца или элемента, например:

p::first-letter {    //код CSS  }  

 

А если вам нужно изменить стиль первой буквы не во всех абзацах, а только в первом параграфе, тогда вы можете объединить псевдо-селекторы, например, так:

p:first-child::first-letter {    //код CSS  }  

 

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

 

 

:first-of-type

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

tr:first-of-type {    //код CSS  }  

 

 

:last-of-type

А этот селектор работает противоположным способом предыдущему селектору – он выбирает последний дочерний элемент заданного типа.

tr:last-of-type {    //код CSS  }  

 

 

 

В этой статье мы рассмотрели далеко не все расширенные селекторы в CSS, но, даже использование вышерассмотренных селекторов, позволит вам создавать уникальные стили для самых сложных элементов DOM.