1. The ul element represents a list of items, where the order of the items is not important
2. Typically rendered as a bulleted list
3. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property
4. The ul and ol elements may be nested as deeply as desired
5. The nested lists may alternate between ol and ul without restriction

1. type
   1. Deprecated
   2. Do not use this attribute, as it has been deprecated; use the CSS list-style-type property instead
   3. If not present and if no CSS list-style-type property applies to the element, the user agent selects a bullet type depending on the nesting level of the list
   4. circle
   5. disc
   6. square
2. list-style-type

   MDN: list-style-type
   1. circle
      A hollow circle
   2. disc
      A filled circle (default value)
   3. square
      A filled square
   4. A string value
      "\20AC" for example
   5. The keyword none
   6. custom-ident
      1. One of the predefined styles (examples above)
      2. An identifier matching the value of @counter-style
   7. symbols()
      Defines an anonymous style of the list
3. list-style-position

   MDN: list-style-position
   1. inside
   2. outside
4. list-style-image

   MDN: list-style-image
   1. sets an image to be used as the list item marker
   2. initial value is none
   3. inherited
5. list-style

   MDN: list-style
   1. This CSS shorthand property allows setting allowed the list style properties at once
   2. The values of this property are applied to list items, including li elements and elements with display: list-item;
   3. 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 nested items
   4. May be used as shorthand for the following:
      1. list-style-type
         If omitted the default disc value is used
      2. list-style-position
         If omitted, the default outside value is used
      3. list-style-image
         If omitted, the default none value is used

HTML

<ul>
    <li>a
    <li>b
    <li>c
    <li>d
</ul>

CSS

ul>li:nth-of-type(even) {
    list-style: url('../images/redSquare.png');
  }

ul>li:nth-of-type(odd) {
    list-style: url('../images/blueSquare.png');
  }

Browser

HTML

<ul>
    <li>a
    <li>b
    <li>c
    <li>d
</ul>

CSS

ul>li:nth-of-type(even) {
    list-style: inside url('../images/redSquare.png');
  }

ul>li:nth-of-type(odd) {
    list-style: url('../images/blueSquare.png');
  }

Browser

HTML

<ul>
    <li>a
    <li>b
    <li>c
    <li>d
</ul>

CSS

ul>li:nth-of-type(even) {
    list-style: inside circle;
  }

ul>li:nth-of-type(odd) {
    list-style: square;
   }

Browser

HTML

<ul>
    <li>a</li>
    <li>
        <ul>
            <li>b</li>
            <li>b
                <ul>
                    <li>c</li>
                    <li>c
                        <ul>
                            <li>d</li>
                            <li>d</li>
                            <li>d</li>
                        </ul>
                    </li>
                    <li>c</li>
                </ul>
            </li>
            <li>b</li>
        </ul>
    </li>
    <li>a</li>
    <li>a</li>
</ul>

Browser

<ul>
    <li>a
    <li>
        <ul>
            <li>b
            <li>b
                <ul>
                    <li>c
                    <li>c
                        <ul>
                            <li>d
                            <li>d
                            <li>d
                        </ul>
                    <li>c
                </ul>
            <li>b
        </ul>
    <li>a
    <li>a
</ul>

Browser

Note

1. list-style-type
2. list-style-image
3. list-style-position