| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Змінити виведення чисел в нумерованном списку і зробити, щоб після номера йшла кругла дужка.
Рішення
За замовчуванням нумерований список має певний вигляд: спочатку йде число, потім точка і після цього через пробіл відображається текст. Така форма написання наочна і зручна, але деякі розробники воліють бачити інший спосіб оформлення нумерованих списків. А саме, щоб замість точки йшла закриваюча дужка, як продемонстровано на рис. 1 або щось подібне.
Рис. 1. Вигляд нумерованого списку з дужкою
Стилі дозволяють змінити вид нумерації списків з допомогою стильових властивостей content і counter-increment. Спочатку для селектора OL потрібно задати counter-reset: item, це потрібно для того, щоб нумерація в кожному новому списку починалася заново. В іншому випадку, нумерація буде продовжена і замість 1,2,3 можна буде побачити 5,6,7. Значення item унікальний ідентифікатор лічильника, ми його вибираємо самі. Далі необхідно заховати вихідні маркери через стильове властивість list-style-type значення none.
Властивість content саме по собі не використовується, як правило, вона працює в поєднанні з псевдоелементами :after і :before. Так, конструкція li:before говорить про те, що перед кожним елементом списку необхідно додати якийсь зміст (приклад 1).
Приклад 1. Створення своєї нумерації
li:before {
content: counter(item) ') '; /* Додаємо до чисел дужку */
counter-increment: item; /* Задаємо ім'я лічильника */
}
content зі значенням counter(item) виводить число; додаючи дужку, як показано в наведеному прикладі, отримаємо необхідний вид нумерації. Властивість counter-increment необхідно для збільшення номера списку на одиницю. Зверніть увагу, що скрізь використовується один і той же ідентифікатор з ім'ям item. Остаточний код наведено в прикладі 2.
Приклад 2. Зміна виду списку
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title>
<style>
ol {
list-style-type: none; /* Прибираємо вихідні маркери */
counter-reset: item; /* Обнуляем лічильник списку */
}
li:before {
content: counter(item) ') '; /* Додаємо до чисел дужку */
counter-increment: item; /* Задаємо ім'я лічильника */
}
</style>
<!--[if lt IE 8]>
<style>
ol {
list-style-type: decimal;
}
</style
<![endif]-->
</head>
<body>
<ol>
<li>Перший</li>
<li>Другий</li>
<li>Третій</li>
<li>Четвертий</li>
</ol>
</body>
</html>
Браузер Internet Explorer до версії 8.0 не підтримує властивість content. Щоб не вийшло явної відмінності при виводі списку в різних браузерах, спеціально для Internet Explorer в даному прикладі через умовні коментарі додано властивість list-style-type зі значенням decimal. Ця запис виводить традиційну нумерацію рядків.
Наведеним способом можна робити будь-який вид нумерованого списку, наприклад, брати число в квадратні дужки, в стилях при цьому зміниться лише один рядок.
content: '[' counter(item) '] ';