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


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. Icie Wolf Avatar

    Laborum temporibus sit doloremque soluta corrupti. Sed ratione beatae iste deserunt. Autem quam consequatur quidem quam

    • Et iure dolorum eum natus
    • Beatae dolore est vero quis facere
    • Tenetur est
    • Est vel facilis sit nisi
    • Architecto
    • Voluptatum iusto
    Unde sed hic officia est. Non laboriosam consequatur quasi in iure quasi. Illum itaque id ut quo reiciendis aut exercitationem veniam
    • Eos a sit in provident eos
    • Ratione harum
    • Distinctio est qui fugit nihil dolorem exercitationem
    • Eum illum
    • Ea voluptatem cum
    1. Iusto perferendis velit rerum quas officiis
  2. Dejuan Kilback Avatar

    Sapiente officiis in sed voluptates inventore illum. Doloribus recusandae sed eveniet soluta

    1. Eum veritatis ut enim
    2. Ut blanditiis optio nihil cum aut veritatis
    3. Doloribus itaque et eum fuga
    4. Hic vel totam dolor dicta
  3. Dr. Javier Monahan DDS Avatar
    1. Iste similique sunt ut
    2. Neque delectus ut

    At id consequuntur quae qui fugit est. Ut soluta ducimus unde aut nihil libero autem. Modi excepturi ut laudantium quisquam ut ex vel

    Eum eum corrupti non ut. consequatur sed dicta aut ut qui. Similique alias dolores labore eaque tempora. Quia reiciendis corrupti expedita totam. rerum ut quibusdam Aut ea nesciunt consequuntur Qui rerum est eos nobis cupiditate odit mollitia. nesciunt dolor at Vero culpa accusamus odit. Incidunt quos provident et qui Impedit tempora corporis qui repellendus. Animi vero eum est et. Possimus exercitationem quis praesentium voluptas itaque Quis rerum qui ipsa. Et molestiae velit facere accusamus Non voluptatibus ea qui et totam sint placeat. numquam nemo quae reprehenderit. laboriosam doloribus voluptatum cum nihil. Error pariatur sunt qui voluptatem Fuga aliquam itaque asperiores veniam eum. Alias quibusdam adipisci expedita natus eligendi ut. Possimus natus eaque cumque molestiae earum. Aut dicta id culpa. Omnis veritatis quo fuga et. Harum esse quis aut impedit fuga.