FANDOM


AlternatingLists modifies the list-style attribute of HTML lists in an alternating pattern based on indentation or list depth.


Installation

Configuration

Unordered lists (*/<ul>) are modified by default; top level list items display as disks, second level items display as circles, third level items go back to displaying as disks, and so on. These are called “alternations,” with levels 1, 3, and 5 being the first alternation, while levels 2 and 4 are the second alternation. Alternations for both unordered lists and ordered lists (#/<ol>) can be customized using the following CSS variable configuration pasted below the import:


:root {
    /* First <ul> alternation */
    --al-ul1-type: disc;
    --al-ul1-position: outside;
    --al-ul1-image: none;
 
    /* Second <ul> alternation */
    --al-ul2-type: circle;
    --al-ul2-position: outside;
    --al-ul2-image: none;
 
    /* First <ol> alternation */
    --al-ol1-type: decimal;
    --al-ol1-position: outside;
    --al-ol1-image: none;
 
    /* Second <ol> alternation */
    --al-ol2-type: decimal;
    --al-ol2-position: outside;
    --al-ol2-image: none;
}

Notes

  • type refers to list-style-type — accepts values listed here
  • position refers to list-style-position — accepts outside or inside
  • image refers to list-style-image — accepts URL values
  • If no ordered list alternations are defined, there is no change to ordered lists.

Example configuration


:root {
    --al-ul1-type: square;
    --al-ul1-position: outside;
    --al-ul1-image: url("https://vignette.wikia.nocookie.net/ursuul/images/f/f0/SA-smol.svg");
 
    --al-ul2-type: disc;
    --al-ul2-position: outside;
    --al-ul2-image: url("https://vignette.wikia.nocookie.net/ursuul/images/3/31/Mod-A-smol.svg");
 
    --al-ol1-type: upper-greek;
    --al-ol1-position: inside;
    --al-ol1-image: none;
 
    --al-ol2-type: upper-latin;
    --al-ol2-position: inside;
    --al-ol2-image: none;
}

Changelog

5/27/18
Beta version released on Diep.io.
6/19/18
Production version released on the Fandom Developers Wiki.

See also

Text above can be found here (edit)
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+