Categories: CSS

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

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

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

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

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

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

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

Вы можете выбирать элементы из 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_).

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

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

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

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

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

Что делать, если у вас и префикс и суффикс формируется динамически? В этом случае вам подойдет такой расширенный 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.