Styling Unordered Lists

CSS How-To showcase
Yuki (雪亮)0

Ever wondered if you can style unordered lists?

  • this is an
  • ordinary
  • list

Or did you encounter times when you want to create a checklist without resorting to images?

  • a checkmark list
  • an xmark entry
  • another checkmark entry

Well, let me show you how!

About

  • Custom Unordered List (CUL)
  • License: Mozilla Public License Version 2.0 (“MPL 2.0”), GNU LESSER GENERAL PUBLIC LICENSE Version 3 (“LGPLv3”)
  • Download source code here

    • The code…

    See the Pen Basic Custom Unordered List by JC John “Yuki” Sese Cuneta (@techmagus) on CodePen.

    How to use the Custom Unordered List

    The format is simple (brackets mean optional):

    <ul class="cul-list [mark-type] [list-colour]">
  <li [class="[mark-type] [list-colour]"]>item #1</li>
  <li [class="[mark-type] [list-colour]"]>item #2</li>
  <li [class="[mark-type] [list-colour]"]>item #3</li>
</ul>

    Examples

    1. If you want to create a checklist
      2. <ul class="cul-list checkmark list-green">
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

      Result

      • item #1
      • item #2
      • item #3
    2. If some items did not meet your criteria
      3. <ul class="cul-list checkmark list-green">
  <li>item #1</li>
  <li class="xmark list-red">item #2</li>
  <li>item #3</li>
</ul>

      Result

      • item #1
      • item #2
      • item #3
    3. Or you have a list with different marks
      4. <ul class="cul-list list-red">
  <li class="checkmark-heavy list-green">item #1</li>
  <li class="xmark-heavy">item #1</li>
  <li class="omark-black list-blue">item #1</li>
</ul>

      Result

      • item #1
      • item #1
      • item #1
    4. You can also write the above code this way (see #3 example)
      5. <ul class="cul-list">
  <li class="checkmark-heavy list-green">item #1</li>
  <li class="xmark-heavy list-red">item #1</li>
  <li class="omark-black list-blue">item #1</li>
</ul>

      Result

      • item #1
      • item #2
      • item #3

    Two things to remember

    There are two special things you might want to remember when nesting unordered lists. These are optional and does not affect all themes.

    1. Add a class with this letter sequence (or word) “mark” to fix the custom list indent

      2. Using our example previously (see #3 and #4 above)

      <ul class="cul-list markfix list-red">
  <li class="checkmark-heavy list-green">item #1</li>
  <li class="xmark-heavy">item #1</li>
  <li class="omark-dark list-blue">item #1</li>
</ul>

      It’s only use is to target the UL elements without any specific “mark”. It could be “yourmarkclass” if you want. But if your list is going to be mainly “checkmark” for example, then use it and refrain from adding checkmark classes in the LI elements.

    2. If your default unordered list indent is off, use class “ordfix” at the UL level
      3. <ul class="ordfix">
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

      Just do not forget to adjust the “ordfix” CSS value accordingly. The CSS value included in the above code was set to the theme I am using as of this post.

    What you can use

    Mark styles

    CSS Precedence/Specificity: Last overrides the previous one (if you declared checkmark at UL element, xmark at LI element will override it).

    • omark-black
      • a “checkmark” in East Asian cultures (Philippines, ASEAN, China, Japan, Korea)
      • for example, shade the circle besides your choice
    • omark-white
      • a “checkmark” in East Asian cultures (Philippines, ASEAN, China, Japan, Korea)
      • for example, encircle the correct answer
    • checkmark
    • checkmark-heavy
    • xmark
      • a crossmark (negation)
      • a wrongmark (negation)
      • ✗ as in “selection” or “choice” (affirmation)
      • ✗ as in “✗ marks the spot” (affirmation)
    • xmark-heavy
      • a crossmark (negation)
      • a wrongmark (negation)
      • ✘ as in “selection” or “choice” (affirmation)
      • ✘ as in “✘ marks the spot” (affirmation)

    Colours

    • red
    • green
    • blue
    • yellow
    • gold
    • magenta
    • pink

    Notice how the colour is not bleeding to the text? If it does with yours, there’s something overriding your custom unordered list stylesheet.

    CSS Precedence/Specificity:

    1. UL-declared colour is overriden by LI-declared colour
    2. Last overrides the previous one (if you declared red at UL element, yellow at LI element will override it).

    Browser compatibility

    Only browser versions that were released 2015 onwards. Any browsers released on 2014 and earlier will not be able to display all or part of our custom unordered list. It’s August 2015 already, time to show your visitors what they are missing by still using obsolete versions.

    For mobile browsers, there’s not much we can do about this. Mobile browsers are limited due to the processing and space capability of mobile gadgets. However, support for basic CSS3 like the above is almost complete, your visitors only have to update to a 2015-released browser version.

    Nested Custom Unordered List Sample

    Here’s an example of a nested custom unordered list.

    • green checkmark-heavy
    • red checkmark-heavy
      • red xmark-heavy
      • green xmark-heavy
        • red omark-black
        • green omark-white
          • magenta xmark-heavy
          • pink xmark-heavy
          • yellow omark-black
            • ordinary
            • list
          • gold omark-black
        • blue omark-black
      • red xmark-heavy
      • ordinary
      • list
    • green checkmark-heavy

    And this last line should show that there’s enough space after the list.

    Enjoy!

    Related articles across the web

      Summary
      Styling Unordered Lists
      Article Name
      Styling Unordered Lists
      Description
      It's time to get rid of generic unordered lists! Let me show you how you can style it and wow your visitors!
      Author
      Publisher
      techmagus™

      CC BY-SA 4.0 Styling Unordered Lists by Yuki (雪亮) is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at Legal Notice.

    Leave a Reply

    labox