list-style

Last updated on

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

ul {
    list-style:  ||  || ;
}

Here’s an example of the syntax:

ul {
    list-style: square outside none;
}

Which would be the same as the following longhand version:

ul {
 list-style-type: square;
 list-style-position: outside;
 list-style-image: none;
}

In the shorthand, if any values are omitted, they will revert to their initial state.

Values for list-style-type

The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:

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

Non-keyword values are introduced in CSS3, but there is little, if any, browser support for them.

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

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
ul:nth-of-type(1) {
  list-style-type: disc;
}

ul:nth-of-type(2) {
  list-style-type: circle;
}

ul:nth-of-type(3) {
  list-style-type: square;
}

ul:nth-of-type(4) {
  list-style-type: decimal;
}

ul:nth-of-type(5) {
  list-style-type: decimal-leading-zero;
}

ul:nth-of-type(6) {
  list-style-type: lower-roman;
}

ul:nth-of-type(7) {
  list-style-type: upper-roman;
}

ul:nth-of-type(8) {
  list-style-type: lower-greek;
}

ul:nth-of-type(9) {
  list-style-type: lower-latin;
}

ul:nth-of-type(10) {
  list-style-type: upper-latin;
}

ul:nth-of-type(11) {
  list-style-type: armenian;
}

ul:nth-of-type(12) {
  list-style-type: georgian;
}

ul:nth-of-type(13) {
  list-style-type: lower-alpha;
}

ul:nth-of-type(14) {
  list-style-type: upper-alpha;
}

ul:nth-of-type(15) {
  list-style-type: none;
}

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 thecolor 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 padding removed from the lists and a left red border added:

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
body {
  padding-left: 50px;  
}

ul:nth-of-type(1) {
  list-style-position: inside;
  padding: 0;
  border-left: solid 2px red;
}

ul:nth-of-type(2) {
  list-style-position: outside;
  padding: 0;
  border-left: solid 2px red;
}

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:

ul {
    list-style-image: url(images/bullet.png);
}

More Demo

<div id="page-wrapper">
  <h1>HTML List Demos</h1>
  
  <h2>Ordered Lists</h2>
  
  <code><pre>
    &lt;ol&gt;
      &lt;li&gt;Google Chrome&lt;/li&gt;
      &lt;li&gt;Internet Explorer&lt;/li&gt;
      &lt;li&gt;Mozilla Firefox&lt;/li&gt;
      &lt;li&gt;Safari&lt;/li&gt;
      &lt;li&gt;Opera&lt;/li&gt;
    &lt;/ol&gt;
  </pre></code>
  
  <ol>
    <li>Google Chrome</li>
    <li>Internet Explorer</li>
    <li>Mozilla Firefox</li>
    <li>Safari</li>
    <li>Opera</li>
  </ol>
  
  <h3>The <code>start</code> Attribute</h3>
  
  <code><pre>
    &lt;ol <strong>start="3"</strong>&gt;
      &lt;li&gt;Google Chrome&lt;/li&gt;
      &lt;li&gt;Internet Explorer&lt;/li&gt;
      &lt;li&gt;Mozilla Firefox&lt;/li&gt;
      &lt;li&gt;Safari&lt;/li&gt;
      &lt;li&gt;Opera&lt;/li&gt;
    &lt;/ol&gt;
  </pre></code>
  
   <ol start="3">
    <li>Google Chrome</li>
    <li>Internet Explorer</li>
    <li>Mozilla Firefox</li>
    <li>Safari</li>
    <li>Opera</li>
  </ol>
  
  <h3>The <code>reversed</code> Attribute</h3>
  
  <code><pre>
    &lt;ol <strong>reversed</strong>&gt;
      &lt;li&gt;Google Chrome&lt;/li&gt;
      &lt;li&gt;Internet Explorer&lt;/li&gt;
      &lt;li&gt;Mozilla Firefox&lt;/li&gt;
      &lt;li&gt;Safari&lt;/li&gt;
      &lt;li&gt;Opera&lt;/li&gt;
    &lt;/ol&gt;
  </pre></code>
  
   <ol reversed>
    <li>Google Chrome</li>
    <li>Internet Explorer</li>
    <li>Mozilla Firefox</li>
    <li>Safari</li>
    <li>Opera</li>
  </ol>
  
  
  <h2>Unordered Lists</h2>
  
  <code><pre>
    &lt;ul&gt;
      &lt;li&gt;Rucksack&lt;/li&gt;
      &lt;li&gt;Compass&lt;/li&gt;
      &lt;li&gt;Map&lt;/li&gt;
      &lt;li&gt;Water Bottle&lt;/li&gt;
      &lt;li&gt;Jacket&lt;/li&gt;
    &lt;/ul&gt;
  </pre></code>
  
  <ul>
    <li>Rucksack</li>
    <li>Compass</li>
    <li>Map</li>
    <li>Water Bottle</li>
    <li>Jacket</li>
  </ul>
  
  
  <h2>Description Lists</h2>
  
  <dl>
    <dt>Author</dt>
    <dd>Matt West</dd>
    <dt>Editors</dt>
    <dd>Sara Shlaer</dd>
    <dd>Ellie Scott</dd>
    <dd>Debbye Butler</dd>
    <dd>Nick Elliott</dd>
  </dl>
  
  
  <h2>Styling Lists</h2>
  
  <h3><code>list-style-type</code></h3>
  
  <h4><code>disc</code></h4>
  <ul id="disc">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
  
  <h4><code>circle</code></h4>
  <ul id="circle">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
  
  <h4><code>square</code></h4>
  <ul id="square">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
  
  <h4><code>decimal</code></h4>
  <ol id="decimal">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>decimal-leading-zero</code></h4>
  <ol id="decimal-leading-zero">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>lower-roman</code></h4>
  <ol id="lower-roman">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>upper-roman</code></h4>
  <ol id="upper-roman">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>lower-greek</code></h4>
  <ol id="lower-greek">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>lower-latin</code></h4>
  <ol id="lower-latin">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>upper-latin</code></h4>
  <ol id="upper-latin">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>armenian</code></h4>
  <ol id="armenian">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>georgian</code></h4>
  <ol id="georgian">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>lower-alpha</code></h4>
  <ol id="lower-alpha">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>upper-alpha</code></h4>
  <ol id="upper-alpha">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>none</code></h4>
  <ol id="none">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h3><code>list-style-position</code></h3>
  
  <h4><code>outside</code></h4>
  <ol id="outside">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  <h4><code>inside</code></h4>
  <ol id="inside">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ol>
  
  
  <h3><code>list-style-image</code></h3>
  <ul id="image">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
  
</div>
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
  -webkit-font-smoothing: antialiased;
}

#page-wrapper {
  width: 640px;
  background: #FFFFFF;
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1 {
  margin-top: 0;
}

pre {
  background: #EEE;
  padding-top: 1em;
  border-left: 5px solid #69c773;
}

#disc {
  list-style-type: disc;
}

#circle {
  list-style-type: circle;
}

#square {
  list-style-type: square;
}

#decimal {
  list-style-type: decimal;
}

#decimal-leading-zero {
  list-style-type: decimal-leading-zero;
}

#lower-roman {
  list-style-type: lower-roman;
}

#upper-roman {
  list-style-type: upper-roman;
}

#lower-greek {
  list-style-type: lower-greek;
}

#lower-latin {
  list-style-type: lower-latin;
}

#upper-latin {
  list-style-type: upper-latin;
}

#armenian {
  list-style-type: armenian;
}

#georgian {
  list-style-type: georgian;
}

#lower-alpha {
  list-style-type: lower-alpha;
}

#upper-alpha {
  list-style-type: upper-alpha;
}

#none {
  list-style-type: none;
}

#outside {
  list-style-position: outside;
}

#inside {
  list-style-position: inside;
}

#image {
  line-height: 1.5em;
  list-style-image: url(marker.png);
}

Related Properties

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

IE6/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.

Leave a Reply

Your email address will not be published. Required fields are marked *