Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 02.12.2022)
90090
солдат
280
самолетов
262
вертолетов
2916
танков
5883
ББМ
1905
артиллерия
210
ПВО
395
РСЗО
4464
машин
16
корабли и катера
Расширенные селекторы 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.

 

 

Добавить комментарий

Ваш адрес email не будет опубликован.