Стаття
Почати
Почати навчання
JavaRush /Java блог /Random UA /Селектори атрибутів
articles
15 рівень

Селектори атрибутів

Стаття з групи Random UA
Для зміни стилю елементів, що містять різні параметри, CSS введено селектори атрибутів. Вони дозволяють встановити стиль тега за наявністю певного параметра або його значення. Селектори атрибутів - 1Примітка: селектори атрибутів підтримуються Internet Explorer починаючи з версії 7.0, причому для коректної роботи прикладів необхідно додати правильний <!DOCTYPE>. Розглянемо кілька типових варіантів застосування таких селекторів.

Простий селектор атрибуту

Встановлює стиль елемента, якщо встановлено специфічний атрибут. Його значення в даному випадку не має значення. Синтаксис застосування такого селектора є наступним. 

[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Пробіл між ім'ям селектора та квадратними дужками не допускається. У прикладі 12.1 показано зміну стилю тега <Q>, якщо до нього доданий параметр title. Приклад 12.1. Вид елемента в залежності від його параметра 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность 
  может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
  <q title="Из законов Фергюсона-Мержевича">После 
  того, як веб-сторінка будет корректно отображаться в одном браузере, выяснится, 
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>
Результат прикладу показано на рис. 12.1 Селектори атрибутів - 2 У цьому прикладі змінюється колір тексту всередині контейнера 7lt;Q>, коли до нього додається параметр title. Зверніть увагу, що для селектора Q[title] не потрібно повторювати атрибути, оскільки вони успадковуються від селектора Q.
Вебінар JavaRush

Селектор атрибуту зі значенням

Встановлює стиль елемента в тому випадку, якщо встановлено певне значення специфічного параметра. Синтаксис застосування наступний. 

[атрибут="значення"] { Описание правил стиля } Селектор[атрибут="значення"] { Описание правил стиля }
У першому випадку стиль застосовується до всіх елементів, які містять вказане значення атрибута. А у другому — лише до певних селекторів. У прикладі 12.2 показано зміну стилю посилання, якщо тег A містить параметр target="_blank". При цьому посилання буде відкриватись у новому вікні і щоб показати це, за допомогою стилів додаємо невеликий малюнок перед текстом посилання. Приклад 12.2. Стиль для відкриття посилань у новому вікні 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[target="_blank"] { 
    background: url(blank.gif) no-repeat 0 2px; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная посилання</a> | 
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>
Результат прикладу наведено нижче (рис. 12.2). Селектори атрибутів - 3У цьому прикладі малюнок до посилання додається за допомогою атрибута background. У його функції входить створення фонової картинки, що повторюється, але повторення фону можна скасувати через аргумент no-repeat, що в результаті дасть єдине зображення.

Атрибут починається з певного значення

Встановлює стиль елемента в тому випадку, якщо атрибут починається з вказаного значення. Синтаксис застосування наступний. 

[атрибут^="значення"] { Описание правил стиля } Селектор[атрибут^="значення"] { Описание правил стиля }
У першому випадку стиль застосовується до всіх елементів, які починаються із заданого значення атрибуту. А у другому — лише до певних селекторів. Припустимо, що на сайті потрібно розділити стиль звичайних та зовнішніх посилань - посилання, які ведуть на інші сайти. Щоб не додавати до тега Aновий клас, скористаємося селекторами атрибутів. Зовнішні посилання характеризуються додаванням до адресаи протоколу, наприклад для доступу до гіпертекстових документів використовується протокол HTTP. Тому зовнішні посилання починаються з ключового слова http://, його додаємо до селектора A, як показано у прикладі 12.3. Приклад 12.3. Зміна стилю зовнішнього посилання 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href^="http://"] { 
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная посилання</a> | 
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя посилання на сайт htmlbook.ru</a></p>
 </body>
</html>
Результат прикладу показаний нижче (рис. 12.3) Селектори атрибутів - 4 У цьому прикладі зовнішні посилання виділяються жирним зображенням. Також можна скористатися наведеним у прикладі 12.2 прийомом і додавати до посилання невелике зображення, яке буде повідомляти, що посилання веде на інший сайт.

Атрибут закінчується певним значенням

Встановлює стиль елемента в тому випадку, якщо атрибут закінчується вказаним значенням. Синтаксис застосування наступний. 

[атрибут$="значення"] { Описание правил стиля } Селектор[атрибут$="значення"] { Описание правил стиля }
У першому випадку стиль застосовується до всіх елементів, які завершуються заданим атрибутом. А у другому — лише до певних селекторів. У такий спосіб можна автоматично розділяти стиль для сайтів домену ru та сайтів інших доменів на зразок com, як показано в прикладі 12.4. Приклад 12.4. Стиль для різних доменів 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href$=".ru"] { /* Если посилання заканчивается на .ru */ 
    background: url(ru.gif) no-repeat; /* Параметры фонового рисунка */
    padding-left: 10px; /* Смещаем текст вправо */ 
   }
   A[href$=".com"] { /* Если посилання заканчивается на .com */ 
    background: url(com.gif) no-repeat;
    padding-left: 10px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com" rel="nofollow" >Yandex.Com</a> | 
  <a href="http://www.yandex.ru" rel="nofollow" >Yandex.Ru</a></p>
 </body>
</html>
У цьому прикладі містяться два посилання, які ведуть різні домени — comі ru. При цьому до кожного такого посилання за допомогою стилів додається свій фоновий малюнок. Стилеві атрибути будуть додаватися тільки для посилань, параметр hrefяких закінчується на .ru або .com. Зауважте, що додавши до імені домену слеш ( http://www.yandex.ru/ ) або адресау сторінки ( http://www.yandex.ru/fun.html ), ми змінимо цим закінчення і стиль застосовуватися не буде. У цьому випадку краще скористатися селектором, в якому певне значення може знаходитись у будь-якому місці атрибуту.
Java-університет

Значення зустрічається у будь-якому місці атрибуту

Можливі варіанти, коли стиль слід застосувати до селектора з певним атрибутом, частиною якого є певне значення. При цьому точно не відомо, чи починається чи закінчується цим значенням аргумент. Тоді слід використовувати наступний синтаксис. 

[атрибут*="значення"] { Описание правил стиля } Селектор[атрибут*="значення"] { Описание правил стиля }
Значення може розташовуватись у будь-якому місці аргументу, наприклад, на початку, наприкінці або десь посередині. Головне, що воно є його частиною. Так, у прикладі 12.5 показано зміну стилю посилань, у яких зустрічається слово HTMLbook. Приклад 12.5. Стиль для різних сайтів 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   [href*="htmlbook"] { 
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/" rel="nofollow" >Теги HTML</a> | 
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> | 
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>
Результат цього прикладу показано на рис. 12.4 Селектори атрибутів - 5 Існують деякі інші види селекторів аргументів, але вони застосовуються досить рідко, тому їх опис ми опустимо. Посилання на першоджерело: http://stepbystep.htmlbook.ru/?id=54
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ