More List Styling Practice


by Jeremy Caudle
notes

Today I ran across some great CSS tips and one of those tips mentioned the ::marker selector. I haven't worked with it before, so I thought I'd do some more practice with list styles.

List styles quick ref

  • Decimal
  • List Item
  • List Item
  • List Item
  • List Item
  • Decimal Leading Zero
  • List Item
  • List Item
  • List Item
  • List Item
  • CJK-Earthly-Branch
  • List Item
  • List Item
  • List Item
  • List Item
  • CJK-Heavenly-Stem
  • List Item
  • List Item
  • List Item
  • List Item
  • Katakana
  • List Item
  • List Item
  • List Item
  • List Item
  • Hiragana
  • List Item
  • List Item
  • List Item
  • List Item

View the code:

HTML and JS 
<div class="codedoodle-block">
        <h3>List styles quick ref</h3>
        <ul class="decimal red-marker">
            <li>Decimal</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="decimal-zero blue-marker">
            <li>Decimal Leading Zero</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="cjk-earth">
            <li>CJK-Earthly-Branch</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="cjk-heaven">
            <li>CJK-Heavenly-Stem</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="katakana">
            <li>Katakana</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="hiragana">
            <li>Hiragana</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>  
    </div>
CSS 
/* Variables */

        :root {
            --blue: rgb(45, 45, 207);
            --red: rgb(196, 20, 20);
        }

        div.codedoodle-block {
            background-color: transparent;
            margin: 3rem auto;
            padding: 1rem;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-radius: .5rem;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: flex-start;
            background-color: #dedede;
            width: 20em;
        }
				
				div.codedoodle-block ul {
					list-style-position: inside;
				}

        .red-marker li::marker {
            color: var(--red);
        }

        .blue-marker li::marker {
            color: var(--blue);
        }
        .decimal {
            list-style-type: decimal;
        }

        .decimal-zero {
            list-style-type: decimal-leading-zero;
        }

        .cjk-earth {
            list-style-type: cjk-earthly-branch;
        }

        .circle li:nth-of-type(1)::marker {
            color: white;
        }

        .cjk-heaven {
            list-style-type: cjk-heavenly-stem;
        }

        .katakana {
            list-style-type: katakana;
        }

        .hiragana {
            list-style-type: hiragana;
        }

Tags