| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Задати колір маркерів у списку не змінюючи колір тексту.
Рішення
Існує два способи зміни кольору маркерів, умовно назвемо їх простий і хитрий. Простий метод полягає в тому, що всередину <li> вкладаємо тег <span>, а вже всередину нього вміщуємо текст. Іншими словами замість традиційної схеми <li>текст</li> створюємо конструкцію <li><span>текст</span></li>. При цьому колір маркерів визначається стильовою властивістю color для селектора LI, а колір тексту — для селектора span (приклад 1).
Приклад 1. Використання вкладених тегів
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Колір тексту і маркерів у списку</title>
<style>
li {
color: red; /* Колір маркерів */
}
li span {
color: navy; /* Колір тексту */
}
</style>
</head>
<body>
<ul>
<li><span>Скрипка</span></li>
<li><span>Гітара</span></li>
<li><span>Волинка</span></li>
<li><span>Шарманка</span></li>
<li><span>Челеста</span></li>
</ul>
</body>
</html>
Результат цього прикладу показано нижче (рис. 1).
Рис. 1. Маркери, що відрізняються за кольором від основного тексту
Незважаючи на простоту, метод незручний, особливо при об'ємних списках, адже до кожного пункту списку тепер доведеться додавати тег <span>. Тому розберемо хитрий спосіб, повністю заснований на роботі CSS.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Суть в наступному — прибираємо оригінальні маркери через властивість list-style-type і додаємо свої власні маркери з допомогою псевдоелемента :before і властивості content. Така зв'язка дозволяє вставляти будь-який текст або символ перед елементом, в даному випадку LI. Причому видом тексту (колір, шрифт, фон і ін) також можна управляти через стилі, що і показано в прикладі 2. Тут в якості маркерів використовується символ параграфа ¶.
Приклад 2. Використання псевдоелемента :before
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Колір маркерів у списку</title>
<style>
li {
list-style-type: none; /* Ховаємо вихідні маркери */
}
li:before {
color: red; /* Колір маркера */
content: "¶ "; /* Сам маркер */
padding-right: 10px; /* Відстань від маркера до тексту */
}
</style>
</head>
<body>
<ul>
<li>Північ</li>
<li>Південь</li>
<li>Захід</li>
<li>Схід</li>
</ul>
</body>
</html>
Результат цього прикладу показано на рис. 2.
Рис. 2. Маркери, створені за допомогою стилів