| 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 |
|---|---|---|---|
Опис
В іменах ідентіфікаторов і класів дозволено використовувати символ дефіса (-), що дозволяє створювати значущі значення атрибутів id і class .
Синтаксис
[атрибут |="значення"] {Опис правил стилю} E [атрибут |="значення"] {Опис правил стилю}
Стиль застосовується до елементів, у яких атрибут починається з вказаного значення або з фрагмента значення, після якого йде дефіс.
Приклад
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", оскільки значення починається саме з цього слова і в значенні зустрічаються дефіси.