Для зміни стилю елементів, які містять різні параметри, в CSS введені селектори атрибутів. Вони дозволяють встановити стиль тега у залежності від наявності певного параметра або його значення.
Простий селектор атрибута встановлює стиль для елемента, якщо задано специфічний атрибут. Його значення у даному випадку не важливо. Синтаксис означення такого селектора наступний:
[атрибут] {Опис правил стилю}
Селектор[атрибут] {Опис правил стилю}
У першому випадку стиль застосовується до всіх елементів, які містять вказаний атрибут. А у другому - лише до вказаних селекторів.
Пробіл між ім'ям селектора та квадратними дужками не допускається.
У прикладі показана зміна стилю тега <Q> у випадку, якщо до нього доданий параметр title:
<style type="text/css">
Q {
font-style:italic; /*Курсив*/
quotes: "\00AB" "\00BB"; /*Міняємо вид лапок*/
}
Q[title] {
color: maroon; /*Колір тексту*/
}
</style>
Зверніть увагу, що для селектора Q[title] немає потреби повторювати атрибути, оскільки вони успадковуються від селектора Q.
Селектор атрибута зі значенням встановлює стиль для елемента у тому випадку, якщо задано певне значення специфічного параметра. Синтаксис селектора такий:
[атрибут="значення"] {Опис правил стилю}
Селектор[атрибут="значення"] {Опис правил стилю}
У першому випадку стиль застосовується до всіх елементів, які містять вказане значення атрибута. А у другому - лише до вказаних селекторів.
CSS дозволяє встановлювати стиль для елемента в тому випадку, якщо атрибут починається з вказаного значення. Синтаксис селектора такий:
[атрибут^="значення"] {Опис правил стилю}
Селектор [атрибут^="значення"] {Опис правил стилю}
Наприклад,
<style type=" text/css">
A[href^="http://"] {font-weight: bold;}
</style>
CSS дозволяє також встановлювати стиль для елемента у тому випадку, якщо атрибут закінчується вказанним значення. Синтаксис селектора такий:
[атрибут$="значення"] {Опис правил стилю}
Селектор[атрибут$="значення"] {Опис правил стилю}
Наприклад,
<style type="text/css">
A[href=".ua"] {font-weight: bold;}
</style>
Можливі варіанти, коли стиль слід застосувати до селектора з певним атрибутом, частиною якого є деяке значення. Тоді можна використовувати наступний синтаксис:
[атрибут*="значення"] {Опис правил стилю}
Селектор [атрибут*="значення"] {Опис правил стилю}
Іноді потрібно встановити одночасно один стиль для всіх елементів веб-сторінки, наприклад, задати шрифт або атрибути виділення тексту. У цьому випадку використовують універсальний селектор, який відповідає будь-якому елементу веб-сторінки. Синтаксис універсального селектора такий:
* {Опис правил стилю}
У деяких випадках вказувати універсальний селектор не обов'язково. Так, наприклад, записи *.class та .class є ідентичними за своїм результатом.
