Стилизация номеров строк (цифр) в упорядоченных списках ol

icon

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

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

html

<ol>
  <li> Посадить дерево </li>
  <li> Построить дом </li>
  <li> Вырастить сына </li>
</ol>

не стилизованный список ol

Давайте рассморим несколько способов решения вышеописанной задачи.

Традиционно топорный способ.

Традиционный способ решения этой проблемы сводится к тому, чтобы скрыть номера строк, автоматически расставленные браузером. При этом используется свойство list-style: none;.

Далее в начало каждого элемента списка добавляется <span> с жестко забитым туда числом. После таких манипуляций можно легко задать css-свойства для вышеупомянутых span-ов.

css

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;
}

html

<ol>
  <li><span class="num">1</span> Посадить дерево </li>
  <li><span class="num">2</span> Построить дом </li>
  <li><span class="num">3</span> Вырастить сына </li>
</ol>

стилизованный список ol span

Согласитесь, выглядит избыточно и не гибко. Мы скрываем автоматически расставленные порядковые номера и заменяем их вручную заданными значениями, засоряем верстку и т.п.

Давайте посмотрим, как можно добиться такого же результата, не засоряя верстку и используя псевдоэлемент ::before и css-свойства content, counter-increment, counter-reset.

Красивый и правильный способ.

Вначале мы приведем код и демку, а потом разберемся, что к чему.

css

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;
}

html

<ol>
  <li> Посадить дерево </li>
  <li> Построить дом </li>
  <li> Вырастить сына </li>
</ol>

стилизованный список ol before

Как видите, html-код остается чистым и красивым. При этом вся стилизация элементов списка переносится в css.

Давайте разберем по пунктам:

  • li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
  • counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого <ol>.
  • counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента ::before.
  • content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента ::before.

подробнее о css-счетчиках можно посмотреть в спецификации.

Вложенные списки и неограниченные возможности стилизации номеров строк.

Вот более интересный пример, сделанный по тому же принципу. Мы не будем приводить в статье html и сss, просто загляните в исходный код.

стилизованный список ol рецепт

Поддержка браузерами

CSS-счетчики, так же как и псевдоэлементы ::before и ::after, с давних пор поддерживаются браузерами:

css-counters поддержка браузерами

Метки: , ,
12 комментариев на “Стилизация номеров строк (цифр) в упорядоченных списках ol
  1. AntonMMF пишет:

    “::befre” Какой интересный псевдоэлемент))

    А вообще в статье не раскрыт момент как делать вложенные списки вида

    Текст
    1.1 Текст
    1.2 Текст
    1.2.1 Текст (да, бывает и такое)
    Новый текст

  2. GladWeb пишет:

    Спасибо за понятную инструкцию. Воспользовался на своем блоге.

  3. usesa пишет:

    Спасибо за статью! Очень познавательно!

  4. Phil Rigovanov пишет:

    Спасибо за интересную и полезную статью!

  5. Дмитрий пишет:

    благодарю за интересный выход из ситуации для маркеров цвета, отличного от цвета текста

  6. Александр пишет:

    Подскажите как организовать вывод списка как на этом сайте

    у них похожая реализация с вашей, но там как через <div> это делается

    • RastaMan пишет:

      Через <div> потомучто подзаголовки. А что мешает в код заглянуть?

      ol{
      counter-reset:ol-counter;
      padding:0;
      margin:30px 0 0;
      list-style:none
      }
      ol:first-child{
      margin-top:0
      }
      ol li{
      position:relative;
      padding:0 0 0 50px;
      margin:25px 0 0
      }
      ol li:first-child{
      margin-top:0
      }

      ol li:before{
      position:absolute;
      top:-3px;
      left:0px;
      color:#fff;
      background-color:#f02337;
      width:30px;
      height:30px;
      line-height:32px;
      border-radius:50%;
      font-size:12px;
      font-weight:bold;
      text-align:center;
      content:counter(ol-counter);
      counter-increment:ol-counter
      }

  7. Сергей пишет:

    Спасибо Вам, 4 года занимаюсь версткой и только сегодня появилась задача стилизировать упорядоченый номерной список. К счастью гугл подсказал именно Ваш сайт. Это реально “магия”, я даже не догадывался что CSS поддерживает такие свойства и значения. Шикарно, спасибо!

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by