이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.

The list-style CSS property is a shorthand for setting the individual values that define how a list is displayed: list-style-type, list-style-image, and list-style-position.

Note: This property is applied to list items, i.e., elements with display: list-item; . By default this includes <li> elements. Because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside.

Syntax

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;

The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

Values

list-style-type
See list-style-type.
list-style-image
See list-style-image.
list-style-position
See list-style-position.
none
No list style is used.

Formal syntax

<'list-style-type'> || <'list-style-position'> || <'list-style-image'>

Examples

HTML

List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

Result

Accessibility concerns

Safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree. To address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

Specifications

Specification Status Comment
CSS Lists Module Level 3
The definition of 'list-style' in that specification.
Working Draft No change.
CSS Level 2 (Revision 1)
The definition of 'list-style' in that specification.
Recommendation Initial definition.

Initial valueas each of the properties of the shorthand:
Applies tolist items
Inheritedyes
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1121471
symbols No ?35 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1 Yes12461 Yes
symbols No No ?35 No No No

See also