CSS - Селекторы атрибутов: Раскрытие силы точной стилизации

Здравствуйте, будущие маги CSS! Сегодня мы погружаемся в魔法льный мир CSS селекторов атрибутов. Затяните ремни, потому что мы на пороге путешествия, которое изменит ваш подход к стилизации веб-страниц. Как ваш добрый сосед-учитель компьютера, я здесь, чтобы провести вас через это приключение с множеством примеров, объяснений и, может быть, даже парой отцовских шуток. Поехали!

Описание

Прежде чем окунуться в深海, давайте поговорим о том, что такое селекторы атрибутов и почему они такие классные. Представьте, что вы на огромной вечеринке (HTML-документ), и вам нужно найти всех людей в красных туфлях (элементы с определенным атрибутом). Селекторы атрибутов - это как ваш личный детектив на вечеринке, который помогает вам pinpointamente определить, кого вы ищете, не беспокоя всю толпу.

В CSS селекторы атрибутов позволяют нам целить HTML-элементы на основе их атрибутов или значений атрибутов. Это дает нам потрясающую гибкость и точность в стилизации, без необходимости использования дополнительных классов или идентификаторов. Это как иметь швейцарский армейский нож для вашего CSS - универсальный, точный и очень удобный!

Теперь давайте рассмотрим различные типы селекторов атрибутов,好吗?

CSS Селектор [attribute]

Самый базовый селектор атрибутов - это селектор [attribute]. Он целит любой элемент, который имеет указанный атрибут, независимо от его значения.

<a href="https://www.example.com">Нажми на меня!</a>
<a>Просто текст</a>

<style>
[href] {
color: blue;
text-decoration: none;
}
</style>

В этом примере только первая ссылка станет синей и утратит подчеркивание, потому что у нее есть атрибут href. Второй тег <a> останется неизменным. Это как найти всех гостей на вечеринке с бирками с именами, независимо от того, какие у них имена!

CSS Селектор [attribute="value"]

Когда вы хотите быть более конкретным, селектор [attribute="value"] приходит на помощь. Он целит элементы, где атрибут совпадает с точным значением.

<input type="text" placeholder="Введите ваше имя">
<input type="password" placeholder="Введите ваш пароль">

<style>
[type="password"] {
border: 2px solid red;
}
</style>

Здесь только ввод пароля получит красную рамку. Это как найти всех ВИП-гостей на вечеринке с золотыми браслетами!

CSS Селектор [attribute*="value"]

Селектор [attribute*="value"] как Bloodhound - он вынюхивает любой элемент, где значение атрибута содержит указанный подстроку, где угодно.

<p title="Я люблю CSS">Абзац 1</p>
<p title="HTML классный">Абзац 2</p>
<p title="JavaScript рулит">Абзац 3</p>

<style>
[title*="CSS"] {
font-weight: bold;
}
</style>

В этом случае только "Абзац 1" станет жирным, потому что его заголовок содержит "CSS". Это как найти любого на вечеринке, чье имя содержит "Смит", будь то Джон Смит, Смитсон или Блэкcмит!

CSS Селектор [attribute^="value"]

Селектор [attribute^="value"] капризен - он выбирает элементы, где значение атрибута начинается с указанного значения.

<a href="https://www.example.com">Ссылка HTTPS</a>
<a href="http://www.example.com">Ссылка HTTP</a>

<style>
[href^="https"] {
color: green;
}
</style>

Только ссылка HTTPS изменит цвет на зеленый. Это как найти всех гостей на вечеринке, чьи имена начинаются с "А"!

CSS Селектор [attribute$="value"]

Наоборот, селектор [attribute$="value"] целит элементы, где значение атрибута оканчивается на указанное значение.

<a href="document.pdf">PDF Документ</a>
<a href="image.jpg">Изображение JPG</a>

<style>
[href$=".pdf"] {
background-color: желтый;
}
</style>

Ссылка на PDF получит желтый фон. Это как найти всех гостей на вечеринке, чьи фамилии оканчиваются на "сон"!

CSS Селектор [attribute|="value"]

Селектор [attribute|="value"] немного уникален. Он выбирает элементы, где значение атрибута точно равно "value" или начинается с "value",mediately followed by a hyphen.

<p lang="en">Английский</p>
<p lang="en-US">Американский английский</p>
<p lang="fr">Французский</p>

<style>
[lang|="en"] {
font-style: italic;
}
</style>

Оба "Английский" и "Американский английский" станут курсивными. Это идеально для стилизации на основе языка!

CSS Селектор [attribute~="value"]

Селектор [attribute~="value"] целит элементы, где значение атрибута содержит указанное слово, окруженное пробелами.

<p class="fruit apple">Яблоко</p>
<p class="fruit orange">Апельсин</p>
<p class="vegetable carrot">Морковь</p>

<style>
[class~="fruit"] {
color: фиолетовый;
}
</style>

"Яблоко" и "Апельсин" станут фиолетовыми. Это как найти всех гостей на вечеринке, у которых "танцор" является одним из их хобби!

Селекторы атрибутов для ссылок href

Селекторы атрибутов особенно полезны для стилизации ссылок на основе их destinations:

<a href="https://www.example.com">Внешняя ссылка</a>
<a href="/internal-page">Внутренняя ссылка</a>
<a href="document.pdf">PDF Документ</a>

<style>
a[href^="https"] {
color: green;
}
a[href^="/"] {
color: blue;
}
a[href$=".pdf"] {
color: red;
}
</style>

Этот код gives different colors к внешним ссылкам, внутренним ссылкам и ссылкам на PDF-файлы.

Селекторы атрибутов для вводов

Селекторы атрибутов блестят при работе с вводами forms:

<input type="text" required>
<input type="email">
<input type="checkbox" checked>

<style>
input[required] {
border: 2px solid red;
}
input[type="email"] {
background-color: светло-синий;
}
input[checked] {
outline: 2px solid green;
}
</style>

Эта стилизация делает обязательные поля выделенными, gives email inputs a light blue background, и подчеркивает旗标 флажки.

Селекторы атрибутов для заголовков

Мы можем использовать селекторы атрибутов для стилизации элементов на основе их атрибутов заголовков:

<div title="Важно">Это важно</div>
<div title="Подробнее">Нажмите, чтобы развернуть</div>

<style>
[title="Важно"] {
font-weight: bold;
color: red;
}
[title*="подробнее"] {
cursor: pointer;
text-decoration: underline;
}
</style>

Это делает важное содержимое выделенным и indicates clickable elements.

Селекторы атрибутов для языка

Языковая стилизация с помощью селекторов атрибутов - это breeze:

<p lang="en">Привет, мир!</p>
<p lang="es">¡Hola, Mundo!</p>
<p lang="fr">Bonjour, le Monde!</p>

<style>
[lang="en"] {
font-family: 'Arial', sans-serif;
}
[lang="es"] {
font-style: italic;
}
[lang="fr"] {
font-weight: bold;
}
</style>

Это применяет different styles к содержимому на разных языках.

CSS Множественные селекторы атрибутов

Вы можете combine multiple attribute selectors для еще более точной цели:

<a href="https://www.example.com" target="_blank" rel="noopener">Безопасная внешняя ссылка</a>
<a href="https://www.example.com">Обычная внешняя ссылка</a>

<style>
a[href^="https"][target="_blank"] {
color: green;
text-decoration: none;
}
</style>

Этот стиль только для внешних ссылок, которые открываются в новой вкладке.

CSS Селекторы атрибутов с同胞ним комбинатором

Селекторы атрибутов можно combine с другими селекторами для advanced styling:

<label for="name">Имя:</label>
<input id="name" type="text" required>
<span class="error">Пожалуйста, введите ваше имя</span>

<style>
input[required] + span.error {
display: none;
color: red;
}
input[required]:invalid + span.error {
display: inline;
}
</style>

Это показывает сообщение об ошибке рядом с обязательными полями, только когда они недействительны.

И вот и все,folks! Полное руководство по селекторам атрибутов CSS. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими селекторами в ваших проектах. Они как secret ingredients, которые могут сделать ваш CSS отличным!

Before we wrap up, here's a handy table summarizing all the attribute selectors we've covered:

Селектор	Пример	Описание
[attribute]	[href]	Выбирает элементы с указанным атрибутом
[attribute="value"]	[type="text"]	Выбирает элементы с указанным атрибутом и значением
[attribute*="value"]	[title*="hello"]	Выбирает элементы, значение атрибута которых содержит указанную подстроку
[attribute^="value"]	[href^="https"]	Выбирает элементы, значение атрибута которых начинается с указанного значения
[attribute$="value"]	[href$=".pdf"]	Выбирает элементы, значение атрибута которых оканчивается на указанное значение
[attribute|="value"]	[lang|="en"]	Выбирает элементы, значение атрибута которых точно равно "value" или начинается с "value" и follows by a hyphen
[attribute~="value"]	[class~="highlight"]	Выбирает элементы, значение атрибута которых содержит указанное слово

Счастливого кодирования, и пусть селектор будет с тобой!

Credits: Image by storyset