1. Виды атрибутных селекторов
Атрибутные селекторы в CSS позволяют выбирать HTML-элементы на основе значений их атрибутов, таких как id, class, name, type, и других. Они предоставляют гибкость и точность в выборе элементов, что особенно полезно для стилизации элементов форм, ссылок и других элементов с уникальными атрибутами. В этой статье рассмотрим различные типы атрибутных селекторов и их применение.
Атрибутные селекторы делятся на несколько категорий, которые позволяют выбрать элементы на основе присутствия атрибута, его точного значения или его части. Основные виды атрибутных селекторов:
- Селектор атрибута: выбирает элементы, которые содержат определенный атрибут, независимо от его значения.
- Селектор атрибута со значением: выбирает элементы с атрибутом, который равен указанному значению.
- Селектор атрибута с начальным значением: выбирает элементы, у которых значение атрибута начинается с указанного префикса.
- Селектор атрибута с конечным значением: выбирает элементы, у которых значение атрибута заканчивается на определенный суффикс.
- Селектор атрибута, содержащего значение: выбирает элементы, у которых значение атрибута содержит определенную подстроку.
- Селектор атрибута с пробельным разделением: выбирает элементы с атрибутом, значение которого содержит определенное слово, разделенное пробелами.
- Селектор атрибута с разделением по дефису: выбирает элементы с атрибутом, значение которого содержит определенное слово, разделенное дефисами.
2. Селектор атрибута (Attribute Selector)
Селектор атрибута выбирает элементы, у которых присутствует определенный атрибут, независимо от его значения. Этот селектор полезен, когда нам нужно выбрать все элементы с конкретным атрибутом.
input[type] {
border: 1px solid black;
}
<input type="text">
<input type="password">
<input type="email">
<input>
В данном примере все <input> элементы с атрибутом type получат черную рамку, независимо от значения этого атрибута.
3. Селектор атрибута со значением
Селектор атрибута со значением выбирает элементы, у которых атрибут равен определенному значению. Это полезно, когда требуется выбрать элементы с конкретным значением атрибута, например, все текстовые поля или ссылки, открывающиеся в новой вкладке.
input[type="text"] {
background-color: #f0f0f0;
}
<input type="text">
<input type="password">
<input type="email">
Здесь только текстовое поле <input type="text"> получит светло-серый фон.
4. Селектор атрибута с начальным значением
Селектор атрибута с начальным значением выбирает элементы, у которых значение атрибута начинается с определенного префикса. Префикс указывается после символа ^=. Этот селектор полезен, например, для выбора всех ссылок, которые ведут на определенный сайт.
a[href^="https://example.com"] {
color: green;
}
<a href="https://example.com/page1">Ссылка на сайт example.com</a>
<a href="https://another.com">Другая ссылка</a>
Только первая ссылка будет окрашена в зеленый цвет, так как она начинается с "https://example.com".
5. Селектор атрибута с конечным значением
Селектор атрибута с конечным значением выбирает элементы, у которых значение атрибута заканчивается определенным суффиксом. Суффикс указывается после символа $=. Этот селектор полезен для выбора файлов определенного типа, например, изображений в формате .png.
img[src$=".png"] {
border: 2px solid blue;
}
<img src="image1.png" alt="Изображение 1">
<img src="image2.jpg" alt="Изображение 2">
Здесь только изображение с расширением .png получит синюю рамку.
6. Селектор атрибута, содержащего значение
Селектор атрибута, содержащего значение, выбирает элементы, у которых значение атрибута содержит указанную подстроку. Подстрока указывается после символа *=. Этот селектор подходит, когда нам нужно выбрать элементы с атрибутом, который содержит определенную часть значения, например, ссылки на определенный раздел сайта.
a[href*="section"] {
font-weight: bold;
}
<a href="https://example.com/section1">Ссылка на раздел 1</a>
<a href="https://example.com/about">О нас</a>
<a href="https://example.com/section2">Ссылка на раздел 2</a>
Только ссылки, содержащие "section" в своем href, будут выделены жирным шрифтом.
7. Селектор атрибута с пробельным разделением
Селектор атрибута с пробельным разделением выбирает элементы, значение атрибута которых содержит указанное слово, разделенное пробелами. Для этого селектора используется символ ~=. Он часто применяется для выбора элементов с определенными классами или другими атрибутами, содержащими несколько значений, разделенных пробелами.
[class~="featured"] {
background-color: yellow;
}
<div class="featured item">Элемент с классом "featured"</div>
<div class="item">Обычный элемент</div>
<div class="highlight featured">Другой элемент с классом "featured"</div>
Здесь только элементы, содержащие featured в списке классов, получат желтый фон.
8. Селектор атрибута с разделением по дефису
Селектор атрибута с разделением по дефису выбирает элементы, у которых значение атрибута начинается с определенного значения и может быть дополнено через дефис. Символ |= используется для выбора элементов, значение которых совпадает с указанным или начинается с него и разделяется дефисом.
[lang|="en"] {
color: blue;
}
<p lang="en">Текст на английском языке</p>
<p lang="en-us">Текст на английском (американский вариант)</p>
<p lang="fr">Текст на французском языке</p>
Здесь синим цветом будут окрашены только элементы с атрибутом lang, равным "en" или начинающимся с "en-", например, "en-us".
9. Пример использования различных атрибутных селекторов
Ниже приведен пример HTML и CSS, где демонстрируется применение различных атрибутных селекторов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример атрибутных селекторов CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Текстовое поле">
<input type="password" placeholder="Пароль">
<input type="email" placeholder="Email">
<a href="https://example.com/page1">Ссылка на example.com</a>
<a href="https://example.com/section2">Ссылка на раздел</a>
<img src="image.png" alt="Изображение PNG">
<img src="photo.jpg" alt="Изображение JPG">
<div class="featured item">Элемент с классом "featured"</div>
<div class="item">Обычный элемент</div>
<div class="highlight featured">Другой элемент с классом "featured"</div>
<p lang="en">Текст на английском языке</p>
<p lang="en-us">Текст на американском английском</p>
<p lang="fr">Текст на французском языке</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример атрибутных селекторов CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Текстовое поле">
<input type="password" placeholder="Пароль">
<input type="email" placeholder="Email">
<a href="https://example.com/page1">Ссылка на example.com</a>
<a href="https://example.com/section2">Ссылка на раздел</a>
<img src="image.png" alt="Изображение PNG">
<img src="photo.jpg" alt="Изображение JPG">
<div class="featured item">Элемент с классом "featured"</div>
<div class="item">Обычный элемент</div>
<div class="highlight featured">Другой элемент с классом "featured"</div>
<p lang="en">Текст на английском языке</p>
<p lang="en-us">Текст на американском английском</p>
<p lang="fr">Текст на французском языке</p>
</body>
</html>
/* Селектор атрибута */
input[type] {
border: 1px solid black;
}
/* Селектор атрибута со значением */
input[type="text"] {
background-color: #f0f0f0;
}
/* Селектор атрибута с начальным значением */
a[href^="https://example.com"] {
color: green;
}
/* Селектор атрибута с конечным значением */
img[src$=".png"] {
border: 2px solid blue;
}
/* Селектор атрибута, содержащего значение */
a[href*="section"] {
font-weight: bold;
}
/* Селектор атрибута с пробельным разделением */
[class~="featured"] {
background-color: yellow;
}
/* Селектор атрибута с разделением по дефису */
[lang|="en"] {
color: blue;
}
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ