Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 43

Warning: Use of undefined constant GUTENBERG_VERSION - assumed 'GUTENBERG_VERSION' (this will throw an Error in a future version of PHP) in /home/wpquicki/smashingcoding/wp-content/themes/nm_gutenberg-main/functions.php on line 49
Edge Case: Nested And Mixed Lists – SmashingCoding Lab

Edge Case: Nested And Mixed Lists

jonathan

, , , ,

Nested and mixed lists are an interesting beast. It’s a corner case to make sure that

  • Lists within lists do not break the ordered list numbering order
  • Your list styles go deep enough.

Ordered – Unordered – Ordered

  1. ordered item
  2. ordered item
    • unordered
    • unordered
      1. ordered item
      2. ordered item
  3. ordered item
  4. ordered item

Ordered – Unordered – Unordered

  1. ordered item
  2. ordered item
    • unordered
    • unordered
      • unordered item
      • unordered item
  3. ordered item
  4. ordered item

Unordered – Ordered – Unordered

  • unordered item
  • unordered item
    1. ordered
    2. ordered
      • unordered item
      • unordered item
  • unordered item
  • unordered item

Unordered – Unordered – Ordered

  • unordered item
  • unordered item
    • unordered
    • unordered
      1. ordered item
      2. ordered item
  • unordered item
  • unordered item

28 responses to “Edge Case: Nested And Mixed Lists”

  1. Prof. Alexandrine D'Amore I Avatar
    Prof. Alexandrine D’Amore I
    • Vero quia ex velit in aperiam qui minus ipsa
    • Aut itaque ratione veniam. Esse aut ex eos dolorem
    • Id dolores labore
    • Enim perferendis qui in mollitia
    • Perferendis esse nihil et ad
    • Enim enim enim reiciendis
    • Illum
    • Excepturi aperiam
    • Saepe neque minus consequatur
    • Distinctio praesentium reprehenderit similique
    • Nisi et
    • Et et amet accusantium quis
  2. Dwight Dach Avatar
    Dwight Dach
    Dolores ullam praesentium incidunt quidem maiores
  3. Osbaldo Rath Avatar
    Osbaldo Rath
    • Et in commodi eligendi iusto quisquam
    • Totam quibusdam
    • Aut vitae nesciunt aut
    1. Eos non maiores alias facere et
    2. Ut ut consequatur sequi ab vero
    3. Voluptatem
    1. Veritatis iste et eos
    2. Iusto magnam
  4. Vivianne Heaney Avatar
    Vivianne Heaney

    Adipisci nisi doloribus ut. Ducimus et voluptatibus rerum. Ea beatae facilis iusto voluptate maxime

  5. Mr. Rodrigo Ratke II Avatar
    Mr. Rodrigo Ratke II

    Est in at nulla soluta nemo. Blanditiis nihil omnis odio laboriosam. Voluptate et expedita iusto et odio impedit

    • Ut
    • Qui quam quos animi
    • Enim et libero nobis
    • Porro et nemo non quam
    • Illo perferendis et ea
    • Enim alias saepe unde
    • Molestias ut
    • Eos et occaecati vero
    1. Facere sed eos
    2. Sed dolorem aut dicta rerum et culpa
Older Comments
1 2 3 4 5 6
Newer Comments