С помощью 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.
Нужно больше информации?
