Revision 20295 of list-style

  • Revision slug: CSS/list-style
  • Revision title: list-style
  • Revision id: 20295
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Migrated data to new compatibility table and added Chrome support data.; 11 words added, 20 words removed

Revision Content

{{ CSSRef() }}

Summary

The list-style CSS property is a shorthand property for setting {{ cssxref("list-style-type") }}, {{ cssxref("list-style-image") }} and {{ cssxref("list-style-position") }}.

  • {{ Xref_cssinitial() }}: see individual properties for details
  • Applies to: elements with display: list-item
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: see individual properties

Syntax

list-style:  list-style-type || list-style-position || list-style-image 

Values

Accepts one, two or three keywords in any order.

list-style-type
See {{ cssxref("list-style-type") }}
list-style-image
See {{ cssxref("list-style-image") }}
list-style-position
See {{ cssxref("list-style-position") }}

Examples

{{ CSSLiveSample("list-style") }}

ul { list-style: circle; }
#foo { list-style: square inside; }

Specifications

Browser Compatibility

Browser Lowest Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See Also

{{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}

{{ languages( { "de": "de/CSS/list-style", "fr": "fr/CSS/list-style", "pl": "pl/CSS/list-style", "es": "es/CSS/list-style" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The<code> list-style </code>CSS property is a shorthand property for setting {{ cssxref("list-style-type") }}, {{ cssxref("list-style-image") }} and {{ cssxref("list-style-position") }}.</p>
<ul> <li>{{ Xref_cssinitial() }}: see individual properties for details</li> <li>Applies to: elements with<code> display: list-item</code></li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: see individual properties</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre>list-style:  list-style-type || list-style-position || list-style-image </pre>
<h3 name="Values">Values</h3>
<dl> <p>Accepts one, two or three keywords in any order.</p> <dt>list-style-type</dt> <dd>See {{ cssxref("list-style-type") }}</dd> <dt>list-style-image</dt> <dd>See {{ cssxref("list-style-image") }}</dd> <dt>list-style-position</dt> <dd>See {{ cssxref("list-style-position") }}</dd>
</dl>
<h3 name="Examples">Examples</h3>
<p>{{ CSSLiveSample("list-style") }}</p>
<pre>ul { list-style: circle; }
</pre>
<pre>#foo { list-style: square inside; }</pre>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style">CSS 2.1 #list-style</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style">CSS 3 Lists #list-style</a> Working draft</li>
</ul>
<h3 name="Browser_Compatibility">Browser Compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>4.0</strong></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> </tr> <tr> <td>Opera</td> <td><strong>3.5</strong></td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.0</strong> (85)</td> </tr> </tbody>
</table>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h3 name="See_Also">See Also</h3>
<p>{{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}</p>
<p>{{ languages( { "de": "de/CSS/list-style", "fr": "fr/CSS/list-style", "pl": "pl/CSS/list-style", "es": "es/CSS/list-style" } ) }}</p>
Revert to this revision