Свойство CSS `list-style-type`

Свойство list-style-type CSS задаёт маркер (например, точку, символ или пользовательский стиль счётчика) элемента списка.

Попробуйте

list-style-type: space-counter;

list-style-type: disc;

list-style-type: circle;

list-style-type: "\1F44D";

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all unhighlighted" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
    </ul>
  </div>
  <hr />
  <div class="note">
    <p>
      <code>space-counter</code> is defined with
      <a
        href="//developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@counter-style"
        target="_parent"
        ><code>@counter-style</code></a
      >
    </p>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Синтаксис

/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/* <string> value */
list-style-type: "-";

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

/* Keyword value */
list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

Свойство list-style-type может быть задано одним из следующих значений:

• значением <custom-ident>,
• значением symbols(),
• значением <string> или
• ключевым словом none.

Обратите внимание:

• Для отображения некоторых типов в соответствии с ожиданиями требуется установленный подходящий шрифт.
• cjk-ideographic идентично trad-chinese-informal; оно существует по причинам совместимости с устаревшими версиями.

Значения

<custom-ident>

Идентификатор, совпадающий со значением @counter-style или одного из предопределённых стилей:

symbols()

Задаёт анонимный стиль списка.

<string>

Указанная строка будет использоваться в качестве маркера элемента.

none

Маркер элемента не отображается.

disc

Заполненный круг (значение по умолчанию).

circle

Незакрашенный круг.

square

Заполненный квадрат.

decimal

Десятичные числа, начиная с 1.

cjk-decimal

Десятичные числа ханьского письма.

decimal-leading-zero

Десятичные числа с ведущими нулями.

lower-roman

Строчные римские цифры.

upper-roman

Заглавные римские цифры.

lower-greek

Строчные буквы классического греческого алфавита.

lower-alpha, lower-latin

Строчные буквы ASCII.

upper-alpha, upper-latin

Заглавные буквы ASCII.

arabic-indic, -moz-arabic-indic

Арабско-индийские цифры.

armenian

Традиционная армянская нумерация.

bengali, -moz-bengali

Бенгальская нумерация.

cambodian/khmer

Камбоджийская/кхмерская нумерация.

cjk-earthly-branch, -moz-cjk-earthly-branch

Порядковые числительные ханьского письма из цикла «земных ветвей».

cjk-heavenly-stem, -moz-cjk-heavenly-stem

Порядковые числительные ханьского письма из цикла «небесных стволов».

cjk-ideographic

Идентично trad-chinese-informal.

devanagari, -moz-devanagari

Деванагари нумерация.

ethiopic-numeric

Эфиопская нумерация.

georgian

Традиционная грузинская нумерация.

gujarati, -moz-gujarati

Нумерация гуджарати.

gurmukhi, -moz-gurmukhi

Нумерация гурмукхи.

hebrew

Традиционная еврейская нумерация.

hiragana

Буквы хираганы в словарном порядке.

hiragana-iroha

Буквы хираганы в порядке ироха.

japanese-formal

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

japanese-informal

Неофициальная японская нумерация.

kannada, -moz-kannada

Нумерация каннада.

katakana

Буквы катаканы в словарном порядке.

katakana-iroha

Буквы катаканы в порядке ироха.

korean-hangul-formal

Корейская нумерация хангыль.

korean-hanja-formal

Официальная корейская нумерация ханча.

korean-hanja-informal

Корейская нумерация ханча.

lao, -moz-lao

Лаосская нумерация.

lower-armenian

Строчные буквы армянской нумерации.

malayalam, -moz-malayalam

Нумерация малаялам.

mongolian

Монгольская нумерация.

myanmar, -moz-myanmar

Мьянманская (бирманская) нумерация.

oriya, -moz-oriya

Нумерация ория.

persian, -moz-persian

Персидская нумерация.

simp-chinese-formal

Официальная нумерация упрощённого китайского письма.

simp-chinese-informal

Неофициальная нумерация упрощённого китайского письма.

tamil, -moz-tamil

Тамильская нумерация.

telugu, -moz-telugu

Нумерация телугу.

thai, -moz-thai

Тайская нумерация.

tibetan

Тибетская нумерация.

trad-chinese-formal

Официальная нумерация традиционного китайского письма.

trad-chinese-informal

Неофициальная нумерация традиционного китайского письма.

upper-armenian

Традиционная нумерация заглавными армянскими буквами.

disclosure-open

Символ, указывающий, что виджет раскрытия, например <details>, открыт.

disclosure-closed

Символ, указывающий, что виджет раскрытия, например <details>, закрыт.

См. пример «Все типы стилей списка», чтобы увидеть перечисленные выше значения в действии. Подробные сведения обо всех доступных стилях счётчиков, используемых в разных культурах мира, можно найти в документе «Готовые стили счётчиков».

Нестандартные расширения

Mozilla (Firefox) поддерживает несколько предопределённых типов с префиксом -moz-.

• ethiopic-halehame: -moz-ethiopic-halehame
• ethiopic-halehame-am: -moz-ethiopic-halehame-am
• ethiopic-halehame-ti-er: -moz-ethiopic-halehame-ti-er
• ethiopic-halehame-ti-et: -moz-ethiopic-halehame-ti-et
• ethiopic-numeric: -moz-ethiopic-numeric
• hangul: -moz-hangul
• hangul-consonant: -moz-hangul-consonant
• urdu: -moz-urdu

См. таблицу совместимости, чтобы узнать, какие браузеры поддерживают то или иное расширение.

Описание

Свойство list-style-type задаёт маркер (например, точку, символ или пользовательский стиль счётчика) элемента списка. Маркер будет иметь цвет currentColor, то есть такой же, как вычисленное значение свойства color элемента, к которому оно применяется.

Только у нескольких элементов (<li> и <summary>) значение по умолчанию — display: list-item. Однако свойство list-style-type можно применить к любому элементу, у которого значение свойства display задано как list-item.

Наследование стилей списка

Поскольку свойство list-style-type наследуется, его можно задать родительскому элементу (обычно <ol> или <ul>), чтобы оно применялось к элементам списка. Однако таблицы стилей пользовательского агента задают list-style-type для элементов <ul>, <ol> и <menu>, поэтому вложенные списки используют эти значения по умолчанию вместо наследования значения родительского списка. Чтобы вложенные списки наследовали это значение, задайте list-style-type: inherit для элементов вложенных списков.

Например, в случае такой разметки:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </li>
</ul>

Для внешнего списка задан пользовательский стиль:

body > ul {
  list-style-type: square;
}

Внутренний список не унаследует пользовательский стиль, если не задать ему значение inherit:

ul ul {
  list-style-type: inherit;
}

Доступность

Safari не распознаёт упорядоченный или неупорядоченный список как список в дереве доступности, если для него задано значение none свойства list-style-type. Это можно исправить, добавив role="list" в открывающий тег списка. Подробнее об этом и возможных способах обхода проблемы см. в разделе list-style.

Формальное определение

Формальный синтаксис

list-style-type = 
  <counter-style> |
  <string> |
  none

<counter-style> = 
  <counter-style-name> |
  symbols()

<counter-style-name> = 
  <custom-ident>

Примеры

Настройка маркеров элементов списка

HTML

List 1
<ol class="normal">
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

List 2
<ol class="shortcut">
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>

CSS

ol.normal {
  list-style-type: upper-alpha;
}

/* or use the shortcut "list-style": */
ol.shortcut {
  list-style: upper-alpha;
}

Результат

Все типы стилей списка

HTML

<ol>
  <li>Apollo</li>
  <li>Hubble</li>
  <li>Chandra</li>
  <li>Cassini-Huygens</li>
  <li>Spitzer</li>
</ol>

<h2>Choose a list style type:</h2>

<div class="container">
  <label for="disc">
    <input type="radio" id="disc" name="type" value="disc" />disc
  </label>

  <label for="circle">
    <input type="radio" id="circle" name="type" value="circle" />circle
  </label>

  <label for="square">
    <input type="radio" id="square" name="type" value="square" />square
  </label>

  <label for="decimal">
    <input type="radio" id="decimal" name="type" value="decimal" />decimal
  </label>

  <label for="cjk-decimal">
    <input
      type="radio"
      id="cjk-decimal"
      name="type"
      value="cjk-decimal" />cjk-decimal
  </label>

  <label for="decimal-leading-zero">
    <input
      type="radio"
      id="decimal-leading-zero"
      name="type"
      value="decimal-leading-zero" />decimal-leading-zero
  </label>

  <label for="lower-roman">
    <input
      type="radio"
      id="lower-roman"
      name="type"
      value="lower-roman" />lower-roman
  </label>

  <label for="upper-roman">
    <input
      type="radio"
      id="upper-roman"
      name="type"
      value="upper-roman" />upper-roman
  </label>

  <label for="lower-greek">
    <input
      type="radio"
      id="lower-greek"
      name="type"
      value="lower-greek" />lower-greek
  </label>

  <label for="lower-alpha">
    <input
      type="radio"
      id="lower-alpha"
      name="type"
      value="lower-alpha" />lower-alpha, lower-latin
  </label>

  <label for="upper-alpha">
    <input
      type="radio"
      id="upper-alpha"
      name="type"
      value="upper-alpha" />upper-alpha, upper-latin
  </label>

  <label for="arabic-indic">
    <input
      type="radio"
      id="arabic-indic"
      name="type"
      value="arabic-indic" />arabic-indic
  </label>

  <label for="armenian">
    <input type="radio" id="armenian" name="type" value="armenian" />armenian
  </label>

  <label for="bengali">
    <input type="radio" id="bengali" name="type" value="bengali" />bengali
  </label>

  <label for="cambodian">
    <input type="radio" id="cambodian" name="type" value="cambodian" />cambodian
  </label>

  <label for="cjk-earthly-branch">
    <input
      type="radio"
      id="cjk-earthly-branch"
      name="type"
      value="cjk-earthly-branch" />cjk-earthly-branch
  </label>

  <label for="cjk-heavenly-stem">
    <input
      type="radio"
      id="cjk-heavenly-stem"
      name="type"
      value="cjk-heavenly-stem" />cjk-heavenly-stem
  </label>

  <label for="cjk-ideographic">
    <input
      type="radio"
      id="cjk-ideographic"
      name="type"
      value="cjk-ideographic" />cjk-ideographic
  </label>

  <label for="devanagari">
    <input
      type="radio"
      id="devanagari"
      name="type"
      value="devanagari" />devanagari
  </label>

  <label for="ethiopic-numeric">
    <input
      type="radio"
      id="ethiopic-numeric"
      name="type"
      value="ethiopic-numeric" />ethiopic-numeric
  </label>

  <label for="georgian">
    <input type="radio" id="georgian" name="type" value="georgian" />georgian
  </label>

  <label for="gujarati">
    <input type="radio" id="gujarati" name="type" value="gujarati" />gujarati
  </label>

  <label for="gurmukhi">
    <input type="radio" id="gurmukhi" name="type" value="gurmukhi" />gurmukhi
  </label>

  <label for="hebrew">
    <input type="radio" id="hebrew" name="type" value="hebrew" />hebrew
  </label>

  <label for="hiragana">
    <input type="radio" id="hiragana" name="type" value="hiragana" />hiragana
  </label>

  <label for="hiragana-iroha">
    <input
      type="radio"
      id="hiragana-iroha"
      name="type"
      value="hiragana-iroha" />hiragana-iroha
  </label>

  <label for="japanese-formal">
    <input
      type="radio"
      id="japanese-formal"
      name="type"
      value="japanese-formal" />japanese-formal
  </label>

  <label for="japanese-informal">
    <input
      type="radio"
      id="japanese-informal"
      name="type"
      value="japanese-informal" />japanese-informal
  </label>

  <label for="kannada">
    <input type="radio" id="kannada" name="type" value="kannada" />kannada
  </label>

  <label for="katakana">
    <input type="radio" id="katakana" name="type" value="katakana" />katakana
  </label>

  <label for="katakana-iroha">
    <input
      type="radio"
      id="katakana-iroha"
      name="type"
      value="katakana-iroha" />katakana-iroha
  </label>

  <label for="khmer">
    <input type="radio" id="khmer" name="type" value="khmer" />khmer
  </label>

  <label for="korean-hangul-formal">
    <input
      type="radio"
      id="korean-hangul-formal"
      name="type"
      value="korean-hangul-formal" />korean-hangul-formal
  </label>

  <label for="korean-hanja-formal">
    <input
      type="radio"
      id="korean-hanja-formal"
      name="type"
      value="korean-hanja-formal" />korean-hanja-formal
  </label>

  <label for="korean-hanja-informal">
    <input
      type="radio"
      id="korean-hanja-informal"
      name="type"
      value="korean-hanja-informal" />korean-hanja-informal
  </label>

  <label for="lao">
    <input type="radio" id="lao" name="type" value="lao" />lao
  </label>

  <label for="lower-armenian">
    <input
      type="radio"
      id="lower-armenian"
      name="type"
      value="lower-armenian" />lower-armenian
  </label>

  <label for="malayalam">
    <input type="radio" id="malayalam" name="type" value="malayalam" />malayalam
  </label>

  <label for="mongolian">
    <input type="radio" id="mongolian" name="type" value="mongolian" />mongolian
  </label>

  <label for="myanmar">
    <input type="radio" id="myanmar" name="type" value="myanmar" />myanmar
  </label>

  <label for="oriya">
    <input type="radio" id="oriya" name="type" value="oriya" />oriya
  </label>

  <label for="persian">
    <input type="radio" id="persian" name="type" value="persian" />persian
  </label>

  <label for="simp-chinese-formal">
    <input
      type="radio"
      id="simp-chinese-formal"
      name="type"
      value="simp-chinese-formal" />simp-chinese-formal
  </label>

  <label for="simp-chinese-informal">
    <input
      type="radio"
      id="simp-chinese-informal"
      name="type"
      value="simp-chinese-informal" />simp-chinese-informal
  </label>

  <label for="tamil">
    <input type="radio" id="tamil" name="type" value="tamil" />tamil
  </label>

  <label for="telugu">
    <input type="radio" id="telugu" name="type" value="telugu" />telugu
  </label>

  <label for="thai">
    <input type="radio" id="thai" name="type" value="thai" />thai
  </label>

  <label for="tibetan">
    <input type="radio" id="tibetan" name="type" value="tibetan" />tibetan
  </label>

  <label for="trad-chinese-formal">
    <input
      type="radio"
      id="trad-chinese-formal"
      name="type"
      value="trad-chinese-formal" />trad-chinese-formal
  </label>

  <label for="trad-chinese-informal">
    <input
      type="radio"
      id="trad-chinese-informal"
      name="type"
      value="trad-chinese-informal" />trad-chinese-informal
  </label>

  <label for="upper-armenian">
    <input
      type="radio"
      id="upper-armenian"
      name="type"
      value="upper-armenian" />upper-armenian
  </label>

  <label for="disclosure-open">
    <input
      type="radio"
      id="disclosure-open"
      name="type"
      value="disclosure-open" />disclosure-open
  </label>

  <label for="disclosure-closed">
    <input
      type="radio"
      id="disclosure-closed"
      name="type"
      value="disclosure-closed" />disclosure-closed
  </label>

  <label for="moz-ethiopic-halehame">
    <input
      type="radio"
      id="moz-ethiopic-halehame"
      name="type"
      value="-moz-ethiopic-halehame" />-moz-ethiopic-halehame
  </label>

  <label for="moz-ethiopic-halehame-am">
    <input
      type="radio"
      id="moz-ethiopic-halehame-am"
      name="type"
      value="-moz-ethiopic-halehame-am" />-moz-ethiopic-halehame-am
  </label>

  <label for="ethiopic-halehame-ti-er">
    <input
      type="radio"
      id="ethiopic-halehame-ti-er"
      name="type"
      value="ethiopic-halehame-ti-er" />ethiopic-halehame-ti-er
  </label>

  <label for="ethiopic-halehame-ti-et">
    <input
      type="radio"
      id="ethiopic-halehame-ti-et"
      name="type"
      value="ethiopic-halehame-ti-et" />ethiopic-halehame-ti-et
  </label>

  <label for="hangul">
    <input type="radio" id="hangul" name="type" value="hangul" />hangul
  </label>

  <label for="hangul-consonant">
    <input
      type="radio"
      id="hangul-consonant"
      name="type"
      value="hangul-consonant" />hangul-consonant
  </label>

  <label for="urdu">
    <input type="radio" id="urdu" name="type" value="urdu" />urdu
  </label>

  <label for="moz-ethiopic-halehame-ti-er">
    <input
      type="radio"
      id="moz-ethiopic-halehame-ti-er"
      name="type"
      value="-moz-ethiopic-halehame-ti-er" />-moz-ethiopic-halehame-ti-er
  </label>

  <label for="moz-ethiopic-halehame-ti-et">
    <input
      type="radio"
      id="moz-ethiopic-halehame-ti-et"
      name="type"
      value="-moz-ethiopic-halehame-ti-et" />-moz-ethiopic-halehame-ti-et
  </label>

  <label for="moz-hangul">
    <input
      type="radio"
      id="moz-hangul"
      name="type"
      value="-moz-hangul" />-moz-hangul
  </label>

  <label for="moz-hangul-consonant">
    <input
      type="radio"
      id="moz-hangul-consonant"
      name="type"
      value="-moz-hangul-consonant" />-moz-hangul-consonant
  </label>

  <label for="moz-urdu">
    <input type="radio" id="moz-urdu" name="type" value="-moz-urdu" />-moz-urdu
  </label>
</div>

CSS

ol {
  font-size: 1.2rem;
}

.container {
  column-count: 3;
}

label {
  display: block;
}

input {
  margin: 0.4rem;
}

JavaScript

const container = document.querySelector(".container");
const list = document.querySelector("ol");

container.addEventListener("change", (event) => {
  list.setAttribute("style", `list-style-type: ${event.target.value}`);
});

Результат

Мы не ограничены типами стилей списка, определёнными на этой странице или в спецификации. Правило @counter-style позволяет создавать счётчики на основе любого алфавита.

Спецификации

Совместимость с браузерами

См. также

• list-style сокращённое свойство
• list-style-image свойство
• list-style-position свойство
• ::marker псевдоэлемент
• Списки и счётчики CSS — модуль
• Стили счётчиков CSS — модуль