{"id":891,"date":"2020-02-14T12:47:02","date_gmt":"2020-02-14T17:47:02","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=891"},"modified":"2020-02-14T12:55:37","modified_gmt":"2020-02-14T17:55:37","slug":"counting-down-an-unordered-list","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2020\/counting-down-an-unordered-list\/","title":{"rendered":"Counting Down an Unordered List"},"content":{"rendered":"\n<p><strong>What:<\/strong> You have an unordered list and you want to turn it into an ordered one through CSS<\/p>\n\n\n\n<p><strong>How:<\/strong> You can do this with <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/generate.html#counters\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"CSS 2.1 (opens in a new tab)\">CSS 2.1<\/a> and the counter element. Yay! I love CSS.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre class=\"wp-block-code css\"><code>#koko-analytics-most-viewed-posts-2 ul {\n\tlist-style: none;\n\tcounter-reset: li;\n}\n\n#koko-analytics-most-viewed-posts-2 li::before {\n\tcontent: counter(li);\n\tcounter-increment: li;\n}<\/code><\/pre>\n\n\n\n<p><strong>Why:<\/strong> I can image you&#8217;re wondering <em>WHY?! Just use an ordered list!!!<\/em> Yes, I know, I agree, however&#8230;sometimes you can&#8217;t. <a href=\"https:\/\/wordpress.org\/plugins\/koko-analytics\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Koko Analytics (opens in a new tab)\">Koko Analytics<\/a>, a privacy-conscious WordPress plugin that does simple site analytics extremely well and I love this sweet plugin for it, now has a wonderful widget that lets you show your most popular posts.<\/p>\n\n\n\n<p>The HTML for it, like with any widget, is generated for me and it&#8217;s giving me an ul to work with. I have no control over that (well&#8230; I do, but you know what I mean) but I can easily add some CSS in the customizer. And I think a top 5 of anything is a good moment to turn an ul into an ol. So I did.<\/p>\n\n\n\n<p><strong>Where:<\/strong> There is a good and clear article by Roger Johansson on the adjacent topic <a href=\"https:\/\/www.456bereastreet.com\/archive\/201105\/styling_ordered_list_numbers\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Styling ordered list numbers (opens in a new tab)\">Styling ordered list numbers<\/a><\/p>\n\n\n\n<p><strong>Thoughts:<\/strong>  As said before, this is not how I would usually make an ordered list, <em>of course<\/em>! This post is just a good excuse to celebrate the existence of the CSS counter because it is awesome and you can use it for fabulous things like numbered chapters, numbered steps in a form, numbered <em>anything<\/em>!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"_3bJ2H CHExY\"><div class=\"_1l8RX _1ByhS\">Photo of viking ship inside the viking museum in Oslo, Norway by <a href=\"https:\/\/www.flickr.com\/photos\/blind007\/\" target=\"_blank\" rel=\"noopener noreferrer\">me<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>What: You have an unordered list and you want to turn it into an ordered one through CSS How: You can do this with CSS 2.1 and the counter element. Yay! I love CSS.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"close","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[134,17,84,83,82,18],"class_list":["post-891","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-465-berea-street","tag-css","tag-list-marker","tag-list-style","tag-lists","tag-pseudo-elements","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=891"}],"version-history":[{"count":0,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/891\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}