Селекторы атрибутов
Селекторы атрибутов — это селекторы, которые позволяют применить стили к любым HTML-элементам имеющим определенный атрибут или определенное значение атрибута. Существует много способов их применения, но, несмотря на такую гибкость, на практике селекторы атрибутов довольно редко используются, так как есть более удобные селекторы. Хотя, с другой стороны, иногда они очень помогают.
Да, и как обычно говорю вам — не вздумайте все, что написано ниже, заучивать наизусть, если с головой дружите. :) Из этого урока вам надо запомнить одно — то, что написано в первом параграфе. В остальном надо просто разобраться и понять. Итак.
Синтаксис селекторов атрибутов
К сожалению, Internet Explorer 6.0 вообще не понимает селекторы атрибутов.
Пример использования селекторов атрибутов в CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Селекторы атрибутов</title>
<style type="text/css">
[href] {
text-decoration: none; /* убираем подчеркивание у элементов с атрибутом href */
font-weight: bold; /* увеличиваем жирность шрифта */
}
[href^="https://seodon.ru"] {
color: red; /* красный цвет текста */
}
[href^="https://spravka.seodon.ru"] {
color: blue; /* синий цвет текста */
}
</style>
</head>
<body>
<p><a href="https://seodon.ru/html/">HTML для начинающих</a></p>
<p><a href="https://seodon.ru/css/">CSS для новичков</a></p>
<p><a href="https://spravka.seodon.ru/">Справочники по HTML и CSS</a></p>
</body>
</html>Результат в браузере
Объединение селекторов атрибутов
Селекторы атрибутов можно объединять между собой или с другими селекторами (например, тегов), чтобы получить более узкие параметры выбора. При объединении селекторы пишутся сразу друг за другом, то есть между ними не должно быть пробелов. В этом случае стили применятся только к тем элементам, которые соотвествуют сразу всем указанным селекторам. Общий синтаксис следующий.
[селектор атрибутов1][селектор атрибутов2] { свойство: значение; ... }
селектор[селектор атрибутов] { свойство: значение; ... }
селектор[селектор атрибутов1][селектор атрибутов2] { свойство: значение; ... }
Пример объединения селекторов атрибутов в CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Объединение селекторов атрибутов</title>
<style type="text/css">
img[alt] {
border: 3px red solid; /* стили рамки картинок с alt */
}
[alt][title] {
border: 3px green solid; /* стили рамок элементов с title и alt */
}
</style>
</head>
<body>
<p>
<img src="image/cat.png" alt="Кошка">
<img src="image/dog.png" alt="Собака" title="Собака">
</p>
</body>
</html>Результат в браузере
Обратите внимание, что в этом примере первый селектор устанавливает рамку только для всех тегов <IMG>, у которых есть атрибут alt. А вот второй селектор задает стили рамки уже не только для обычных картинок, но и вообще для всех элементов страницы имеющих атрибуты alt и title.
Домашнее задание.
В данном задании вы можете использовать только селекторы тегов и атрибутов, а в ссылках только атрибут href.
- Сделайте так, чтобы любые абсолютные ссылки на вашей страничке выводились жирным шрифтом без подчеркивания. Для этого вам понадобятся свойства font-weight и text-decoration.
- Сделайте две относительные ссылки и по две абсолютные, ведущие на поисковики Яндекс и Google. Пусть ссылки ведущие на Яндекс будут красного цвета, на Google — зеленого, а остальные — синего. Используйте свойство color.
| Селекторы тегов | ← Содержание → | Универсальный селектор |