Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
7.0 + | 1.0 + | 3.5 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Можливі варіанти, коли стиль варто застосувати до тегу з певним атрибутом, коли частиною його значення є деякий текст. При цьому точно не відомо, в якому місці значення включений даний текст — на початку, середині або наприкінці. У подібному випадку варто використовувати конструкцію *=. Вона визначає, що значення атрибута містить вказаний текст.
Синтаксис
[атрибут *="значення"] {Опис правил стилю} E [атрибут *="значення"] {Опис правил стилю}
Приклад
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://lesson.html-css.co.ua"> Online уроки </a> | <a href="http://google.com/"> Пошук Google </a> </p> </body> </html>
Результат даного прикладу показаний на рис. 1. У прикладі показано зміна стилю посилань, в атрибуті href яких зустрічається слово « html-css ».