> For the complete documentation index, see [llms.txt](https://codennerd.gitbook.io/cxcss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codennerd.gitbook.io/cxcss/product-guides/typography/list-style.md).

# List Style

#### List Style Type Classes

The following classes allow you to control the list-style-type property, which defines the appearance of list item markers.

**`.list-none`**

Removes any marker or bullets from the list items.

CSS equivalent: `list-style-type: none;`

Example usage:

```html
<ul class="list-none">
  <li><!--List with no marker--></li>
</ul>
```

***

**`.list-disc`**

Sets the list marker to a disc, which is the default for unordered lists.

CSS equivalent: `list-style-type: disc;`

Example usage:

```html
<ul class="list-disc">
  <li><!--List with disc marker--></li>
</ul>
```

***

**`.list-circle`**

Sets the list marker to an open circle.

CSS equivalent: `list-style-type: circle;`

Example usage:

```html
<ul class="list-circle">
  <li><!--List with circle marker--></li>
</ul>
```

***

**`.list-square`**

Sets the list marker to a square.

CSS equivalent: `list-style-type: square;`

Example usage:

```html
<ul class="list-square">
  <li><!--List with square marker--></li>
</ul>
```

***

**`.list-decimal`**

Sets the list marker to numbers(decimals), which is the default for ordered lists.

CSS equivalent: `list-style-type: decimal;`

Example usage:

```html
<ol class="list-decimal">
  <li><!--List with decimals marker--></li>
</ol>
```

***

**`.list-decimal-leading-zero`**

Sets the list marker to numbers with a leading zero (01, 02, 03, etc.).

CSS equivalent: `list-style-type: decimal-leading-zero;`

Example usage:

```html
<ol class="list-decimal-leading-zero">
  <li><!--List with decimal-leading-zero marker--></li>
</ol>
```

***

**`.list-lower-roman`**

Sets the list marker to lowercase Roman numerals (i, ii, iii, etc.).

CSS equivalent: `list-style-type: lower-roman;`

Example usage:

```html
<ol class="list-lower-roman">
  <li><!--List with lower-roman marker--></li>
</ol>
```

***

**`.list-upper-roman`**

Sets the list marker to uppercase Roman numerals (I, II, III, etc.).

CSS equivalent: `list-style-type: upper-roman;`

Example usage:

```html
<ol class="list-upper-roman">
  <li><!--List with upper-roman marker--></li>
</ol>
```

***

**`.list-lower-alpha`**

Sets the list marker to lowercase alphabetical characters (a, b, c, etc.).

CSS equivalent: `list-style-type: lower-alpha;`

Example usage:

```html
<ol class="list-lower-alpha">
  <li><!--List with lower-alpha marker--></li>
</ol>
```

***

**`.list-upper-alpha`**

Sets the list marker to uppercase alphabetical characters (A, B, C, etc.).

CSS equivalent: `list-style-type: upper-alpha;`

Example usage:

```html
<ol class="list-upper-alpha">
  <li><!--List with upper-alpha marker--></li>
</ol>
```

***

**`.list-lower-greek`**

Sets the list marker to lowercase Greek characters (α, β, γ, etc.).

CSS equivalent: `list-style-type: lower-greek;`

Example usage:

```html
<ol class="list-lower-greek">
  <li><!--List with lower-greek marker--></li>
</ol>
```

***

**`.list-upper-greek`**

Sets the list marker to uppercase Greek characters (Α, Β, Γ, etc.).

CSS equivalent: `list-style-type: upper-greek;`

Example usage:

```html
<ol class="list-upper-greek">
  <li><!--List with upper-greek marker--></li>
</ol>
```

***

**`.list-lower-latin`**

Sets the list marker to lowercase Latin characters (a, b, c, etc.).

CSS equivalent: `list-style-type: lower-latin;`

Example usage:

```html
<ol class="list-lower-latin">
  <li><!--List with lower-latin marker--></li>
</ol>
```

***

**`.list-upper-latin`**

Sets the list marker to uppercase Latin characters (A, B, C, etc.).

CSS equivalent: `list-style-type: upper-latin;`

Example usage:

```html
<ol class="list-upper-latin">
  <li><!--List with upper-latin marker--></li>
</ol>
```

***

**`.list-disclosure-closed`**

Sets the list marker to a closed disclosure triangle.

CSS equivalent: `list-style-type: disclosure-closed;`

Example usage:

```html
<ul class="list-disclosure-closed">
  <li><!--List with disclosure-closed marker--></li>
</ul>
```

***

**`.list-disclosure-open`**

Sets the list marker to an open disclosure triangle.

CSS equivalent: `list-style-type: disclosure-open;`

Example usage:

```html
<ul class="list-disclosure-open">
  <li><!--List with disclosure-open marker--></li>
</ul>
```

***

#### List Style Position Classes

These classes control the position of the list marker relative to the list item content.

**`.list-inside`**

Sets the list marker to appear inside the content box of the list item.

CSS equivalent: `list-style-position: inside;`

Example usage:

```html
<ul class="list-inside">
  <li><!--List with list-inside position--></li>
</ul>
```

***

**`.list-outside`**

Sets the list marker to appear outside the content box of the list item.

CSS equivalent: `list-style-position: outside;`

Example usage:

```html
<ul class="list-outside">
  <li><!--List with list-outside position--></li>
</ul>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codennerd.gitbook.io/cxcss/product-guides/typography/list-style.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.