Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should the CSS property list-style be applied to <ul>/<ol> or <li>?

Most sites show the syntax as applying list-style to the <li> but I've seen some tutorial sites (like this one) that apply list-style to the <ul> or <ol>.

Which is the 'correct' way?

like image 760
pixeltocode Avatar asked Mar 09 '10 12:03

pixeltocode


People also ask

How do you use the list-style property in CSS?

The list-style property can be applied to <ol>, <ul> or <li> tags. The list-style applies to elements with display: list-item. When using the list-style property, you can provide one or all of the values (list-style-type, list-style-position and list-style-image values) and they can be provided in any order.

What is UL and OL in CSS?

unordered lists (<ul>) - the list items are marked with bullets. ordered lists (<ol>) - the list items are marked with numbers or letters.

What is the use of list-style type in CSS?

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

What is UL LI A in CSS?

The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists. Tip: Use CSS to style lists. Tip: For ordered lists, use the <ol> tag.


2 Answers

As not having a list style is generally more common that having a list style, I personally apply it to both in a global reset at the top of my stylesheet.

like image 31
Tom Avatar answered Oct 02 '22 11:10

Tom


According to the W3C CSS2 reference, which can be found here,

Another solution would be to specify 'list-style' information only on the list type elements:

ol.alpha  { list-style-type: lower-alpha } ul        { list-style-type: disc } 

Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.

So you can do it at the overall list level if all of your elements are going to be the same, but you can instead do it at the list entry level if for example some entries would have different glyphs (like a square instead of a disc) to convey some meaning. You can also do both, with the list level style serving as a default to be overridden (but be careful about selector precedence!).

like image 143
Pointy Avatar answered Oct 02 '22 10:10

Pointy