`list-style` — свойство CSS

Сокращённое свойство list-style CSS позволяет задать все свойства стиля списка одновременно.

Попробуйте

list-style: square;

list-style: inside;

list-style: url("/shared-assets/images/examples/rocket.svg");

list-style: none;

list-style: georgian inside url("/shared-assets/images/examples/rocket.svg");

list-style: georgian outside url("/non-existent.svg");

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
      <li>Spitzer</li>
    </ul>
  </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: " ";
}

Составные свойства

Это сокращённое свойство для следующих свойств CSS:

• list-style-image
• list-style-position
• list-style-type

Синтаксис

/* type */
list-style: square;

/* image */
list-style: url("../img/shape.png");

/* position */
list-style: inside;

/* two values */
list-style: georgian outside;
list-style: url("img/pip.svg") inside;

/* three values */
list-style: lower-roman url("img/shape.png") outside;

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

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

Свойство list-style задаётся одним, двумя или тремя значениями в произвольном порядке. Если заданы и list-style-type, и list-style-image, значение list-style-type используется в качестве запасного варианта, если изображение недоступно.

Значения

list-style-type

<counter-style>, <string> или none. Если значение опущено в сокращённой записи, по умолчанию используется disc. См. list-style-type.

list-style-image

<image> или none. Если значение опущено, по умолчанию используется none. См. list-style-image.

list-style-position

Либо inside, либо outside. Если значение опущено, по умолчанию используется outside. См. list-style-position.

none

Стиль списка не используется.

Описание

Свойство list-style позволяет настроить внешний вид элементов списка. Значения этого свойства применяются к элементам списка, включая элементы <li> и элементы с display: list-item;.

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

Поскольку длинное свойство list-style-type наследуется, list-style можно задать для родительского элемента (обычно <ol> или <ul>), чтобы применить одинаковый стиль ко всем его элементам списка. Однако таблицы стилей пользовательского агента задают list-style-type для элементов <ul>, <ol> и <menu>, поэтому вложенные списки используют эти значения по умолчанию, а не наследуют list-style родительского списка. Значения list-style-position и list-style-image обычно наследуются вложенными списками. Чтобы вложенные списки также наследовали тип маркера, задайте для list-style или 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: square;
}

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

ul ul {
  list-style: inherit;
}

Доступность

Safari не распознаёт упорядоченные и неупорядоченные списки как списки в дереве доступности, если для них задано значение list-style, равное none, за исключением случаев, когда список вложен в навигационный элемент <nav>. Такое поведение предусмотрено намеренно и не считается ошибкой.

Чтобы списки объявлялись как списки, добавьте role="list" элементам <ol> и <ul>, особенно если список не вложен в <nav>. Это восстановит семантику списка, не влияя на оформление:

<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>

Если использование ARIA role в вашем коде невозможно, вместо этого можно использовать CSS. Добавление непустого псевдосодержимого, например текста или изображений перед каждым элементом списка, может восстановить семантику списка, но повлияет на его внешний вид. Safari определяет, достаточно ли добавленного псевдосодержимого для доступности, и при необходимости восстанавливает семантику списка. Как правило, Safari считает текст и изображения достаточными, поэтому приведённый ниже content: "+ "; работает (но требует дополнительного оформления, чтобы не влиять на внешний вид).

ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

Объявление content: ""; (пустой строки) игнорируется, как и значения content, содержащие только пробелы, например content: " ";.

Эти обходные решения на CSS следует использовать только тогда, когда решение на HTML недоступно, и только после проверки, что они не приводят к неожиданному поведению, которое может негативно повлиять на взаимодействие с пользователем.

• «Исправление» списков (2023)
• VoiceOver и list-style-type: none (2017)
• Понимание WCAG: создание содержимого, которое можно представить разными способами

• [Понимание критерия успеха 1.3.1: информация и взаимосвязи

  WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)

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

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

list-style = 
  <'list-style-type'> ||
  <'list-style-position'> ||
  <'list-style-image'>

Примеры

Задание типа и положения стиля списка

HTML

List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

Результат

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

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

См. также

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