Чимало тегів розрізняються за своєю дією в залежності від того, які в них використовуються атрибути. Наприклад, тег <input> може створювати кнопку, текстове поле і інші елементи форми всього лише за рахунок зміни значення атрибуту type . При цьому додавання правил стилю до селектора INPUT застосує стиль одночасно до всіх створеним за допомогою цього тега елементам. Щоб гнучко управляти стилем подібних елементів, в CSS введені селектори атрибутів. Вони дозволяють встановити стиль за присутністю певного атрибута тега або його значення.
Розглянемо кілька типових варіантів застосування таких селекторів.
Простий селектор атрибуту
Встановлює стиль для елемента, якщо заданий специфічний атрибут тега. Його значення в даному випадку не важливо. Синтаксис застосування такого селектора наступний.
[атрибут] {Опис правил стилю} Селектор [атрибут] {Опис правил стилю}
Стиль застосовується до тих тегам, всередині яких були додані вказаний атрибут. Пропуск між ім'ям селектора і квадратними дужками не допускається.
У прикладі 13.1 показано зміна стилю тега <q> , в тому випадку, якщо до нього додано атрибут title .
Приклад 13.1. Вигляд елемента в залежності від його атрибута
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Селектори атрибутів </title>
<style>
q{
font-style: italic; /* Курсив */
quotes:"\00AB" "\00BB"; /* Змінюємо вигляд лапок в цитаті */
}
q[title] {
color: maroon; /* Колір тексту */
}
</style>
</head>
<body>
<p>
Продовжуючи відомий закон Мерфі, який говорить: <q>
Якщо неприємність може трапитися, то вона обов'язково трапиться </q>
, можемо ввести своє спостереження: <q title="З законів Фергюссона-Мержевіч">
Якщо веб-сторінка буде коректно відображатися в одному браузері, з'ясується, що вона неправильно показується в іншому</q>
. </p>
</body>
</html>
Результат прикладу показаний на рис. 13.1.
В даному прикладі змінюється колір тексту усередині контейнера <q> , коли до нього додається title . Зверніть увагу, що для селектора q[title] немає потреби повторювати стильові властивості, оскільки вони успадковуються від селектора q.
Атрибут зі значенням
Встановлює стиль для елемента в тому випадку, якщо задано певне значення специфічного атрибута. Синтаксис застосування наступний.
[атрибут="значення"] {Опис правил стилю} Селектор [атрибут="значення"] {Опис правил стилю}
В першому випадку стиль застосовується до всіх тегам, які містять вказане значення. А в другому — тільки до певних селекторам.
У прикладі 13.2 показано зміна стилю посилання в тому випадку, якщо тег <a> містить атрибут target із значенням _ blank . При цьому посилання буде відкриватися в новому вікні і щоб показати це, за допомогою стилів додаємо невеликий малюнок перед текстом посилання.
Приклад 13.2. Стиль для відкриття посилань в новому вікні
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
селектори атрибутів </title>
<style>
A [target="_blank"] {background: url (images/blank.png) 0 6px no-repeat; /* Параметри фонового малюнка */ padding-left: 15px; /* Зміщуємо текст вправо */ } </style>
</head>
<body>
<p>
<a href="1.html">
Звичайна посилання </a>
| <a href="link2" target="_blank">
Посилання в новому вікні </a>
</p>
</body>
</html>
Результат прикладу показаний нижче (рис. 13.2).
В даному прикладі малюнок до заслання додається за допомогою властивості background . У його функції входить створення повторюваної фонової картинки, але повторення фону можна скасувати через значення no-repeat, що в підсумку дасть єдине зображення.
Значення атрибута починається з певного тексту
Встановлює стиль для елемента в тому випадку, якщо значення атрибута тега починається з вказаного тексту. Синтаксис застосування наступний.
[атрибут ^="значення"] {Опис правил стилю} Селектор [атрибут ^="значення"] {Опис правил стилю}
В першому випадку стиль застосовується до всіх елементів, у яких значення атрибута починаються з вказаного тексту. А в другому — тільки до певних селекторам. Використання лапок не обов'язково, але тільки якщо значення містить латинські букви і без пробілів.
Припустимо, що на сайті потрібно розділити стиль звичайних і зовнішніх посилань — посилання, які ведуть на інші сайти. Щоб не вводити в тег <a> новий клас, скористаємося селекторами атрибутів. Зовнішні посилання характеризуються додаванням до адреси протоколу, наприклад, для доступу до гіпертекстових документів використовується протокол HTTP. Тому зовнішні посилання починаються з ключового слова http://, його і додаємо до селектора A, як показано в прикладі 13.3.
Приклад 13.3. Зміна стилю зовнішнього посилання
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
селектори атрибутів </title>
<style>
A [href ^="http://"] {font-weight: bold /* Жирне накреслення */ } </style>
</head>
<body>
<p>
<a href="1.html">
Звичайна посилання </a>
| <a href="" target="_blank">
Зовнішнє посилання на сайт html-css.co.ua </a>
</p>
</body>
</html>
Результат прикладу показаний нижче (рис. 13.3).
В даному прикладі зовнішні посилання виділяються жирним шрифтом. Також можна скористатися показаним в прикладі 13.2 прийомом і додавати до заслання невелике зображення, яке буде повідомляти, що посилання веде на інший сайт.
Значення атрибута закінчується певним текстом
Встановлює стиль для елемента в тому випадку, якщо значення атрибута закінчується зазначеним текстом. Синтаксис застосування наступний.
[атрибут $="значення"] {Опис правил стилю} Селектор [атрибут $="значення"] {Опис правил стилю}
В першому випадку стиль застосовується до всіх елементів у яких значення атрибута завершується заданим текстом. А в другому — тільки до певних селекторам.
Таким способом можна автоматично розділяти стиль для посилань на сайти домену ru і для посилань на сайти інших доменів на зразок com, як показано в прикладі 13.4.
Приклад 13.4. Стиль для різних доменів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
селектори атрибутів </title>
<style>
A [href $=".ru"] { /* Якщо посилання закінчується на .ru */ background: url (images/ru.png) no-repeat 0 6px; /* Додаємо фоновий малюнок */ padding-left: 12px; /* Зміщуємо текст вправо */ } A [href $=".com"] { /* Якщо посилання закінчується на .com */ background: url (images/com.png) no-repeat 0 6px; padding-left: 12px; } </style>
</head>
<body>
<p>
<a href="http://www.yandex.com">
Yandex.Com </a>
| <a href="http://www.yandex.ru">
Yandex.Ru </a>
</p>
</body>
</html>
В даному прикладі містяться дві прямі посилання на різні домени — com і ru. При цьому до кожної такої посиланням за допомогою стилів додається своя фонова картинка (рис. 13.4). Стильові властивості будуть застосовуватися тільки для тих посилань, атрибут href яких закінчується на « .ru » або « .com » ;. Зауважте, що додавши до імені домена слеш (http://www.yandex.ru/) або адреса сторінки (http://www.yandex.ru/fun.html), ми змінимо тим самим закінчення і стиль застосовуватися вже не буде . В цьому випадку краще скористатися селектором, у якого заданий текст зустрічається в будь-якому місці значення атрибута.
Значення атрибута містить вказаний текст
Можливі варіанти, коли стиль варто застосувати до тегу з певним атрибутом, при цьому частиною його значення є деякий текст. При цьому точно не відомо, в якому місці значення включений даний текст — на початку, середині або наприкінці. У подібному випадку варто використовувати такий синтаксис.
[атрибут *="значення"] {Опис правил стилю} Селектор [атрибут *="значення"] {Опис правил стилю}
у прикладі 13.5 показано зміна стилю посилань, в атрибуті href яких зустрічається слово « html-css » ;.
Приклад 13.5. Стиль для різних сайтів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
селектори атрибутів </title>
<style>
[Href*="html-css"] {background: yellow; /* Жовтий колір фону */ } </style>
</head>
<body>
<p>
<a href="https://html-css.co.ua/html/">
Теги HTML </a>
| <a href="http://stepbystep.html-css.co.ua">
Крок за кроком </a>
| <a href="http://webimg.ru">
Графіка для Веб </a>
</p>
</body>
</html>
Результат даного прикладу показаний на рис. 13.5.
Одне з кількох значень атрибута
Деякі значення атрибутів можуть перераховуватися через пробіл, наприклад імена класів. Щоб задати стиль при наявності в списку необхідного значення застосовується наступний синтаксис.
[атрибут ~="значення"] {Опис правил стилю} Селектор [атрибут ~="значення " ;] {Опис правил стилю}
Стиль застосовується в тому випадку, якщо у атрибута є вказане значення або воно входить в список значень, що розділяються пропуском (приклад 13.6).
Приклад 13.6. Стиль в залежності від імені класу
HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Блок </title>
<style>
[Class ~="block"] h3 {color: green; } </style>
</head>
<body>
<div class="block tag">
<h3>
Тема </h3>
</div>
</body>
</html>
В даному прикладі зелений колір тексту застосовується до селектора h3, якщо ім'я класу у шару задано як block . Відзначимо, що аналогічний результат можна отримати, якщо використовувати конструкцію *= замість ~=.
Дефіс в значенні атрибута
В іменах ідентифікаторів і класів дозволено використовувати символ дефіса (-), що дозволяє створювати значущі значення атрибутів id і class . Для зміни стилю елементів, в значенні яких застосовується дефіс, варто скористатися таким синтаксисом.
[атрибут |="значення"] {Опис правил стилю} Селектор [атрибут |="значення"] {Опис правил стилю}
Стиль застосовується до елементів, у яких атрибут починається з вказаного значення або з фрагмента значення, після якого йде дефіс (приклад 13.7).
Приклад 13.7. Дефіси в значеннях
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Блок </title>
<style>
div [class |="block"] {background: #306589; /* Колір фону */ color:#acdb4c; /* Колір тексту */ padding: 5px; /* Поля */ } div [class |="block"] A {color: #fff; /* Колір посилань */ } </style>
</head>
<body>
<div class="block-menu-therm">
<h2>
Терміни </h2>
<div class="content">
<ul class="menu">
<li>
<a href="t1.html">
Буквиця </a>
</li>
<li>
<a href="t2.html">
Виворотка </a>
</li>
<li>
<a href="t3.html">
Вирівнювання </a>
</li>
<li>
<a href="t4.html">
Міжрядкові </a>
</li>
<li>
<a href="t5.html">
Капітель </a>
</li>
<li>
<a href="t6.html">
Начертание </a>
</li>
<li>
<a href="t7.html">
Відбиття </a>
</li>
</ul>
</div>
</div>
</body>
</html>
В даному прикладі ім'я класу задано як block-menu-therm, тому в стилях використовується конструкція |="block", оскільки значення починається саме з цього слова і в значенні зустрічаються дефіси.
Всі перераховані методи можна комбінувати між собою, визначаючи стиль для елементів, які містять два і більше атрибута. У подібних випадках квадратні дужки йдуть підряд.
[атрибут1="значення1"] [атрібут2="значення2"] {Опис правил стилю} Селектор [атрибут1="значення1"] [атрібут2="значення2"] {Опис правил стилю}
Питання для перевірки
1. Необхідно задати колір фону у текстового поля. Який стиль для цієї мети підійде?
- INPUT [type="text"] {background: #acdacc; }
- INPUT [type="textinput"] {background: #acdacc; }
- INPUT [type="textfield"] {background: #acdacc; }
- INPUT [type="textarea"] {background: #acdacc; }
- INPUT [type="texts"] {background: #acdacc; }
2. Який стиль необхідно використовувати, щоб змінити колір тексту тільки у другого абзацу?
<p class="text text1-count1-text"> Перший абзац </p> <p class="text text2-count2-text"> Другий абзац </p> <p class="text text3-count3-text"> Третій абзац </p>
- P [class |="text2"] {color: red; }
- P [class ^="text2"] {color: red; }
- P [class ~="text2"] {color: red; }
- P [class *="text2"] {color: red; }
- P [class $="text2"] {color: red; }
3. До якого елементу буде застосовуватися наступний стиль?
[class ~="lorem"] {background: #666; }
- <p class="lorem-ipsum"> Lorem ipsum dolor sit amet </p>
- <div class="lorem-ipsum dolor"> Lorem ipsum dolor sit amet </div>
- <p class="ipsum-lorem"> Lorem ipsum dolor sit amet </p>
- < ; div class="lorem ipsum"> Lorem ipsum dolor sit amet </div>
- <p> <span class="1orem ipsum"> Lorem ipsum dolor sit amet </span> </p>
Відповіді
1. INPUT [type="text"] {background: #acdacc; }
2. P [class *="text2"] {color: red; }
3. <div class="lorem ipsum"> Lorem ipsum dolor sit amet </div>