rick@tillitsdone.com

+66824564755

Scroll to discover

CSS List-Style Simplify List Styling for Web Design

The CSS list-style property allows you to easily set the type, position, and image of list markers.

Options include disc, circle, square, decimal, and custom images.

Learn how to use it effectively.

Introduction

The list-style CSS property is a shorthand that sets multiple list style properties simultaneously, streamlining the web development process. It defines how list item markers look, including their type, position, and image. This property ensures consistent and visually appealing lists on your website.

Specification

The list-style property combines three individual properties: list-style-type, list-style-position, and list-style-image. This makes it easier to manage and style lists.

list-style-type: Sets the type of marker (e.g., disc, circle, decimal).
list-style-position: Determines the position of the marker (inside or outside).
list-style-image: Uses a custom image as the marker.

By using list-style, you can set all three properties in one line, reducing the amount of CSS code needed.

Syntax

The list-style property combines the following values:

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

Values

list-style-type: Sets the marker type (e.g., disc, circle, square, decimal).
list-style-position: Positions the marker (inside or outside).
list-style-image: Uses a custom image (url("path/to/image.png")).

Example Usage

Here’s how you can use the list-style property in your CSS:

ul {
  list-style: square inside url("path/to/image.png");
}

In this example, the list items will have a square marker placed inside the list item, and a custom image will be used as the marker.

Formal Definition

Initial Value: disc, outside, none
Applies To: List items (<li> elements and elements with display: list-item;)
Inherited: Yes
Computed Value: As specified
Animation Type: Discrete

Breakdown of Syntax

list-style-position:
- Values: inside or outside
- Description: Sets the marker’s position relative to the list item.
list-style-image:
- Values: <image> (a URL or gradient) or none
- Description: Uses a custom image as the list marker.
list-style-type:
- Values: <counter-style> (e.g., disc, circle, square), <string>, or none
- Description: Sets the type of marker for the list items.
image:
- Values: <url> (a URL) or <gradient> (a gradient)
- Description: Specifies the image to be used as the marker.
counter-style:
- Values: <counter-style-name> (e.g., decimal, lower-roman, upper-roman) or <symbols()>
- Description: Defines the counter style used for the marker.
url:
- Values: <url()> (a URL function) or <src()> (a source function)
- Description: Specifies the URL or source of the image.
symbols():
- Values: symbols( <symbols-type>[?][<string> | <image>]+ )
- Description: Defines a custom set of symbols to be used as the marker.
url():
- Values: url( <string> [<url-modifier>] )
- Description: Specifies a URL with an optional modifier.
src():
- Values: src( <string> [<url-modifier>] )
- Description: Specifies a source with an optional modifier.
symbols-type:
- Values: cyclic, numeric, alphabetic, symbolic, fixed
- Description: Defines the type of symbols to be used.

Accessibility

Ensuring your lists are accessible is crucial for an inclusive web experience. Here are some important considerations and best practices:

Recognition of Lists by Screen Readers

Some browsers, like Safari, may not recognize lists if list-style is set to none. To ensure lists are announced as lists, you can:

ARIA Role:

<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>

CSS Pseudo-Content:

ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

Practical Examples

Setting List Style Type and Position

Here’s how to set different list styles:

<!DOCTYPE html>
<html>
<head>
    <title>CSS list-style Property</title>
    <style>
        .list-inside {
            list-style: circle inside;
        }

        .list-outside {
            list-style: square outside;
        }

        .custom-marker {
            list-style: url("path/to/image.png") inside;
        }

        .combined-styles {
            list-style: lower-roman url("path/to/image.png") outside;
        }
    </style>
</head>
<body>
    <h1>CSS list-style Property</h1>

    <h2>List with Marker Inside</h2>
    <ul class="list-inside">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <h2>List with Marker Outside</h2>
    <ul class="list-outside">
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
    </ul>

    <h2>List with Custom Image Marker</h2>
    <ul class="custom-marker">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <h2>List with Combined Styles</h2>
    <ul class="combined-styles">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Specifications

The list-style property is defined in the CSS Lists and Counters Module Level 3 specification. This specification outlines the behavior and syntax of the list-style property, ensuring consistency and interoperability across different web browsers.

CSS Lists and Counters Module Level 3

Specification: CSS Lists and Counters Module Level 3
Status: This specification is currently in the draft stage, but it provides a comprehensive guide to the list-style property and its constituent properties.

Browser Compatibility

Ensuring that your CSS properties are compatible across different web browsers is crucial for providing a consistent user experience. The list-style property is widely supported by modern web browsers, making it a reliable choice for styling lists in your web development projects.

Desktop Browsers

Google Chrome: The list-style property is fully supported in all versions of Google Chrome.
Mozilla Firefox: The list-style property is fully supported in all versions of Mozilla Firefox.
Internet Explorer/Microsoft Edge: The list-style property is supported in Internet Explorer 4.0 and later versions. It is also fully supported in all versions of Microsoft Edge.
Safari: The list-style property is fully supported in all versions of Safari.
Opera: The list-style property is fully supported in all versions of Opera.

Mobile Browsers

Chrome for Android: The list-style property is fully supported in all versions of Chrome for Android.
Firefox for Android: The list-style property is fully supported in all versions of Firefox for Android.
Safari on iOS: The list-style property is fully supported in all versions of Safari on iOS.
Opera Mobile: The list-style property is fully supported in all versions of Opera Mobile.
Samsung Internet: The list-style property is fully supported in all versions of Samsung Internet.

Browser Compatibility Table

Browser	Version	Support
Google Chrome	All	Full
Mozilla Firefox	All	Full
Internet Explorer	4.0+	Full
Microsoft Edge	All	Full
Safari	All	Full
Opera	All	Full
Chrome for Android	All	Full
Firefox for Android	All	Full
Safari on iOS	All	Full
Opera Mobile	All	Full
Samsung Internet	All	Full

Important Considerations

While the list-style property is widely supported, there are a few considerations to keep in mind to ensure cross-browser compatibility:

Custom Images: When using the list-style-image property to set a custom image as the marker, make sure the image is accessible and properly loaded. Some browsers may not display the image if it is not available.
Fallback Styles: Always provide a fallback style using the list-style-type property in case the custom image is not loaded. This ensures that the list remains visually appealing even if the image fails to load.
Accessibility: Ensure that your lists are announced correctly by screen readers. Adding ARIA roles or using CSS pseudo-content can help maintain accessibility.
Vendor Prefixes: For older versions of some browsers, you might need to use vendor prefixes to ensure full compatibility. However, this is generally not necessary for modern browsers.

Example for Cross-Browser Compatibility

Here’s an example of how you might use the list-style property with a fallback style to ensure cross-browser compatibility:

ul {
  list-style: square url("path/to/image.png");
}

In this example, the list items will use a custom image as the marker. If the image is not available, the fallback style (square) will be used.

FAQs

What does the list-style property control?

The list-style property is a shorthand for setting the style, position, and image of list markers in one declaration for list items. It allows you to define the appearance of list item markers, including their type (such as disc, circle, square, decimal, etc.), position (inside or outside the list item), and custom images.

How can I remove list markers using list-style?

To remove list markers, you can use list-style: none;. This hides the bullet points or numbers for the list items, making the list appear as plain text.

Can I set different list styles for nested lists?

Yes, by targeting nested lists with specific selectors, you can apply different list styles using the list-style properties like circle, square, decimal, or custom images. This allows you to create visually distinct nested lists.

Is list-style inheritable?

Yes, the list-style property is inherited. This means that if you set the list-style property on a parent element, such as <ol> (ordered list) or <ul> (unordered list), all nested list items will inherit the same styling unless overridden.

Can list-style be combined with other properties like margin and padding?

Yes, list-style can be combined with margin and padding to control the spacing and alignment of list items more precisely. This allows you to create well-structured and visually appealing lists that enhance the user experience.

What browsers support the list-style property?

The list-style property is widely supported across all modern web browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera. It is also supported on mobile browsers like Chrome for Android, Firefox for Android, Safari on iOS, Opera Mobile, and Samsung Internet.

What should I do if a custom image for list-style-image is not loaded?

Always provide a fallback style using the list-style-type property. If the custom image specified by list-style-image is not loaded, the fallback style will ensure that the list remains visually appealing. For example:

ul {
  list-style: square url("path/to/image.png");
}

In this example, if the image is not available, the list will fall back to using a square marker.

How do I ensure accessibility when using list-style: none?

To ensure that lists are announced as lists by screen readers, you can add the role="list" attribute to <ol> and <ul> elements, especially if the list is not nested in a <nav> element. This restores list semantics without affecting the design. For example:

<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>

Alternatively, you can use CSS to add non-empty pseudo-content before each list item to restore list semantics, but this may impact the visual appearance.

Are there any known issues with the list-style property in specific browsers?

One known issue is that Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a list-style value of none, unless the list is nested within the <nav> navigation element. To ensure lists are announced as lists, include role="list" in the <ol> or <ul> elements.

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS List-Style Simplify List Styling for Web Design

Introduction

Specification

Syntax

Values

Example Usage

Formal Definition

Breakdown of Syntax

Accessibility

Recognition of Lists by Screen Readers

Practical Examples

Setting List Style Type and Position

Specifications

CSS Lists and Counters Module Level 3

Browser Compatibility

Desktop Browsers

Mobile Browsers

Browser Compatibility Table

Important Considerations

Example for Cross-Browser Compatibility

FAQs

What does the list-style property control?

How can I remove list markers using list-style?

Can I set different list styles for nested lists?

Is list-style inheritable?

Can list-style be combined with other properties like margin and padding?

What browsers support the list-style property?

What should I do if a custom image for list-style-image is not loaded?

How do I ensure accessibility when using list-style: none?

Are there any known issues with the list-style property in specific browsers?

See Also

Talk with CEO