Html item list style

list-style

The list-style CSS shorthand property allows you to set all the list style properties at once.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* type */ list-style: square; /* image */ list-style: url("../img/shape.png"); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ 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; 

The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

Values

Accessibility concerns

In a notable exception, Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a list-style value of none . This behavior is intentional and not considered a bug.

or
element in the markup. This will restore the list semantics without affecting the design:

ul role="list"> li>An itemli> li>Another itemli> ul> 

A CSS-only workaround is also available for those who do not have access to the markup: Adding pseudo-content before each list item can restore list semantics:

ul  list-style: none; > ul li::before  content: "+ "; > 

The added pseudo-content is tested by Safari to determine if it should be accessible or ignored. Accessible pseudo-content restores list semantics, while ignored pseudo-content does not.

Generally, text or images are determined to be things that should be accessible, which is why the content: «+ «; declaration in the previous example works.

A declaration of content: «»; (an empty string) is ignored, as are content values that contain only spaces, such as content: » «; , so these do not work.

If the intent is to keep list item markers visually hidden, this can often be managed with a zero-width space, ​ , which is \200B in CSS and \u200B in JavaScript:

ul  list-style: none; > ul li::before  content: "\200B"; > 

Another visually hidden approach is to apply an to the list-style property:

nav ol, nav ul  list-style: none; > /* becomes */ nav ol, nav ul  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); > 

These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don’t result in unexpected behaviors that may negatively impact users’ experiences.

Formal definition

• list-style-type : disc
• list-style-position : outside
• list-style-image : none

• list-style-image : The keyword none or the computed
• list-style-position : as specified
• list-style-type : as specified

• list-style-image : discrete
• list-style-position : discrete
• list-style-type : discrete

Formal syntax

Examples

Setting list style type and position

HTML

ul class="one"> li>List Item1li> li>List Item2li> li>List Item3li> ul> List 2 ul class="two"> li>List Item Ali> li>List Item Bli> li>List Item Cli> ul> 

CSS

.one  list-style: circle; > .two  list-style: square inside; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 26, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

list — style

Шорткат list — style позволяет одновременно задать значение для следующих свойств:

Пример

Скопировать ссылку «Пример» Скопировано

Код ниже задаёт всем элементам списка стиль маркера upper — alpha и делает маркер частью содержимого элемента списка.

 li  list-style: upper-alpha inside;> li  list-style: upper-alpha inside; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значения свойства можно задавать в любом порядке и в любом количестве от 1 до 3.

Установим значение none для изображения и типа маркера:

 ul  list-style: none;> ul  list-style: none; >    Скопировать Скопировано Не удалось скопировать   

Зададим значение disc для типа маркера и inside для позиции:

 ul  list-style: disc inside;> ul  list-style: disc inside; >    Скопировать Скопировано Не удалось скопировать   

Зададим значение decimal для типа, укажем путь до картинки и расположим маркер снаружи пункта списка:

 ul  list-style: decimal url('marker.png') outside;> ul  list-style: decimal url('marker.png') outside; >    Скопировать Скопировано Не удалось скопировать   

Браузер сам найдёт подходящие значения для нужных свойств.

Использование значения none

Скопировать ссылку «Использование значения none» Скопировано

Использовать значение none в сокращении стоит аккуратно, потому что это значение можно указать как для list — style — image так и для list — style — type .

Например, код ниже установит значение none для list — style — image , а для list — style — type значение disc :

 ul  list-style: none disc;> ul  list-style: none disc; >    Скопировать Скопировано Не удалось скопировать   

А здесь установит значение url ( doka . png ) для list — style — image , а для list — style — type значение none :

 ul  list-style: none url(doka.png);> ul  list-style: none url(doka.png); >    Скопировать Скопировано Не удалось скопировать   

Если установить просто значение none свойству list — style , то значение none применится только к list — style — image и list — style — type , но не к свойству list — style — position , потому что у него нет значения none .

Код ниже устанавливает значение none для свойств list — style — image и list — style — type :

 ul  list-style: none;> ul  list-style: none; >    Скопировать Скопировано Не удалось скопировать   

А такой код не сработает. У свойства list — style — position нет значения none :

 ul  list-style: none disc url(doka.png);> ul  list-style: none disc url(doka.png); >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Как и с любым шорткатом, со свойством list — style нужно обращаться осторожно. Если потребуется переопределить всего одно из заданных значений, то нужно будет переписать и все остальные.

💡 Если в рамках шортката не задано значение для какого-то из свойств и в коде ниже оно не прописано, то свойству устанавливается значение по умолчанию.

💡 Записанные выше отдельные свойства переопределяются заданным ниже свойством list — style .

Источник

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

or
tag, affects the entire list, while properties added to the
tag will affect the individual list items:

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

Источник

list-style

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none

MDN has a more complete list. Non-keyword values were introduced in CSS3, and are starting to see some support, like:

The following demo includes a group of unordered lists to demonstrate each keyword value:

The list-style-type property applies to all lists, and to any element that is set to display: list-item .

The color of the list marker will be whatever the computed color of the element is (set via the color property).

Values for list-style-position

The list-style-position property defines where to position the list marker, and it accepts one of two values: inside or outside. These are demonstrated below with the padding removed from the lists and a left red border added:

Values for list-style-image

The list-style-image property determines whether the list marker is set with an image, and accepts a value of “none” or a URL that points to the image:

IE	Edge	Firefox	Chrome	Safari	Opera
Yes	Yes	Yes	Yes	Works	Works

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Yes	Yes	Yes	Yes	Works

Source: caniuse

Internet Explorer 6 and 7 don’t support all the keyword values for list-style-type and also have a bug where floated list items do not display their list marker. This is resolved by using a background image (instead of list-style-image ) on the list items.

Источник