list-style

  • Revision slug: CSS/list-style
  • Revision title: list-style
  • Revision id: 20282
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment misstates shorthand semantics

Revision Content

{{template.CSSRef()}}

Summary

The list-style property is a shorthand property for setting list-style-type, list-style-image, and list-style-position.

  • Initial value: see individual properties for details
  • Applies to: elements with 'display: list-item'
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: see individual properties

Syntax

list-style: [ list-style-type || list-style-position || list-style-image ] | inherit

Values

list-style-type 
See list-style-type.
list-style-image 
See list-style-image.
list-style-position 
See list-style-position.

Examples

ul { 
    list-style: circle inside;
}

Notes

While the 'border-width' property accepts up to four length values, this property only accepts one.

Specifications

Browser Compatibility

See Also

list-style, list-style-type, list-style-image, list-style-position

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>list-style</code> property is a shorthand property for setting list-style-type, list-style-image, and list-style-position.
</p>
<ul><li> Initial value: see individual properties for details
</li><li> Applies to: elements with 'display: list-item'
</li><li> Inherited: no
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">visual</a>
</li><li> Computed value: see individual properties
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">list-style: [ list-style-type || list-style-position || list-style-image ] | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> <code>list-style-type</code> </dt><dd> See <code><a href="en/CSS/list-style-type">list-style-type</a></code>.
</dd><dt> <code>list-style-image</code> </dt><dd> See <code><a href="en/CSS/list-style-image">list-style-image</a></code>.
</dd><dt> <code>list-style-position</code> </dt><dd> See <code><a href="en/CSS/list-style-position">list-style-position</a></code>.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<pre>ul { 
    list-style: circle inside;
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>While the 'border-width' property accepts up to four length values, this property only accepts one.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#lists">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-style">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<h3 name="See_Also"> See Also </h3>
<p><a href="en/CSS/list-style">list-style</a>, <a href="en/CSS/list-style-type">list-style-type</a>, <a href="en/CSS/list-style-image">list-style-image</a>, <a href="en/CSS/list-style-position">list-style-position</a>
</p>
Revert to this revision