На сайте ведутся работы!
Поэтому могут быть ошибки и недочеты. Приносим свои извинения и постараемся все исправить в ближайшее время.
AdBlock
Блокируйте рекламу. Просматривайте быстрее.
Adguard
Самый быстрый и легковесный блокировщик рекламы для браузеров.
Недавние обсуждения
Если вы когда-либо пробовали изменять css-стили номеров строк (цифр) в упорядоченных списках <ol>, то, наверняка, сталкивались с проблемами. Достучаться до стилей этих элементов при помощи css-селекторов невозможно. А ведь довольно часто дизайн интерфейса предполагает изменение иx цвета, фона, размера и т.д.

Вот самый простой пример нестилизованного списка:

Код
<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;
}


Код
<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;
}


Код
<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.


подробнее о css-счетчиках можно посмотреть в спецификации
Теги к материалу
упорядоченных, строк, списках, номеров, стилизация, (цифр), ol
Поделись материалом с друзьями
Рекомендуем к просмотру
К материалу оставили 0 комментариев