Категории: 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

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

Ричард Бах

Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее

16/04/2024

Стивен Кинг

Жизнь – это непрерывный опыт, и даже самые плохие моменты занимают свое место в пазле… Читать далее

15/04/2024

неизвестный автор

Люди, которые любят одиночество, дорого заплатили за дружбу с кем-то... неизвестный автор   Читать далее

14/04/2024

Наполеон Хилл

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

13/04/2024

Дейл Карнеги

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

12/04/2024

Борьба с курением на ярких примерах социальной рекламы

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

11/04/2024