Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках <ol>, то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.
Вот самый простой пример нестилизованного списка:
Вот что получилось:
Давайте рассмотрим несколько способов решения вышеописанной задачи.
Традиционно топорный способ.
Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none;.
Далее в начало каждого элемента списка добавляется <span> с жестко забитым туда числом. После таких манипуляций можно легко задать css-свойства для вышеупомянутых span-ов.
Вот что получилось:
Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.
Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент ::before и css-свойства content, counter-increment, counter-reset.
Красивый и правильный способ.
Вначале мы приведем код, а потом разберемся, что к чему.
Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.
Давайте разберем по пунктам:
подробнее о css-счетчиках можно посмотреть в спецификации
Вот самый простой пример нестилизованного списка:
Код
<ol>
<li> Посадить дерево </li>
<li> Построить дом </li>
<li> Вырастить сына </li>
</ol>
<li> Посадить дерево </li>
<li> Построить дом </li>
<li> Вырастить сына </li>
</ol>
Вот что получилось:
Давайте рассмотрим несколько способов решения вышеописанной задачи.
Традиционно топорный способ.
Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none;.
Далее в начало каждого элемента списка добавляется <span> с жестко забитым туда числом. После таких манипуляций можно легко задать css-свойства для вышеупомянутых span-ов.
Код
li{
list-style: none;
}
.num{
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}
list-style: none;
}
.num{
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}
Код
<ol>
<li><span class="num">1</span> Посадить дерево </li>
<li><span class="num">2</span> Построить дом </li>
<li><span class="num">3</span> Вырастить сына </li>
</ol>
<li><span class="num">1</span> Посадить дерево </li>
<li><span class="num">2</span> Построить дом </li>
<li><span class="num">3</span> Вырастить сына </li>
</ol>
Вот что получилось:
Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.
Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент ::before и css-свойства content, counter-increment, counter-reset.
Красивый и правильный способ.
Вначале мы приведем код, а потом разберемся, что к чему.
Код
ol{
counter-reset: myCounter;
}
li{
list-style: none;
}
li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}
counter-reset: myCounter;
}
li{
list-style: none;
}
li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9;
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
}
Код
<ol>
<li> Посадить дерево </li>
<li> Построить дом </li>
<li> Вырастить сына </li>
</ol>
<li> Посадить дерево </li>
<li> Построить дом </li>
<li> Вырастить сына </li>
</ol>
Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.
Давайте разберем по пунктам:
Цитата
li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого <ol>.
counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента ::before.
content:counter(myCounter);– выводит текущее значение счетчика myCounter внутри псевдоэлемента ::before.
counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого <ol>.
counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента ::before.
content:counter(myCounter);– выводит текущее значение счетчика myCounter внутри псевдоэлемента ::before.
подробнее о css-счетчиках можно посмотреть в спецификации