Revision 20296 of list-style

  • Revision slug: CSS/list-style
  • Revision title: list-style
  • Revision id: 20296
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Removed old browser compatibility table.; 26 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

{{ 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>
<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