Категории: CSS

Расширенные селекторы 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.

 

Share

Последние посты

Антуан де Сент-Экзюпери

Никогда не теряй терпения — это последний ключ, отпирающий двери Антуан де Сент-Экзюпери   Читать далее

28/03/2024

Сомерсет Моэм

Когда вы станете старше, вы поймете, что в мире можно хоть как-нибудь жить только при… Читать далее

27/03/2024

Михаил Грушевский

Все учатся своему родному языку, а наша беда такова, что нужно учить его больше, чем… Читать далее

26/03/2024

ТОП-5 надежных покерных обменников

Профессиональный покер – это многочисленные турниры и крупные суммы, что требует правильной настройки финансовых инструментов.… Читать далее

25/03/2024

Гай Юлий Цезарь

Все вокруг стремятся истребить врагов, но не объединиться с друзьями Гай Юлий Цезарь   Читать далее

24/03/2024

Как выбрать оптимальный смартфон для ребенка?

Сегодняшние дети сталкиваются с технологиями с самого раннего возраста, и смартфон уже давно перестал быть… Читать далее

22/03/2024