Have you ever heard of CSS counters? It’s a feature of CSS for numbering non-consecutive items, wherever they might be in the DOM. It doesn’t have a lot of uses cases but it’s important to understand this kind of new features to understand how powerful is CSS today.
\n
\nThese are two articles that I have selected for you:<\/p>\n
http:\/\/www.sitepoint.com\/understanding-css-counters-and-their-use-cases\/<\/a> Have you ever heard of CSS counters? It’s a feature of CSS for numbering non-consecutive items, wherever they might be in the DOM. It doesn’t have a lot of uses cases but it’s important to understand this kind of new features to understand how powerful is CSS today.<\/p>\n","protected":false},"author":1,"featured_media":393,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[33],"tags":[48,41,15],"class_list":["post-392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-trick-of-the-day","tag-css","tag-css-counters","tag-css3"],"jetpack_featured_media_url":"https:\/\/www.audero.it\/blog\/wp-content\/uploads\/2015\/06\/css3-logo.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9Or4e-6k","jetpack-related-posts":[{"id":404,"url":"https:\/\/www.audero.it\/blog\/2015\/07\/14\/trick-of-the-day-css-scroll-snap-points\/","url_meta":{"origin":392,"position":0},"title":"Trick of the day: CSS Scroll Snap Points","author":"Aurelio De Rosa","date":"July 14, 2015","format":false,"excerpt":"When you create a gallery, you usually want to implement a feature where every time the user clicks (or press the ENTER key) on an arrow, you move straight to the next (or previous) image. This effect can also be used to create a website that has several sections, each\u2026","rel":"","context":"In "Trick of the day"","block_context":{"text":"Trick of the day","link":"https:\/\/www.audero.it\/blog\/category\/trick-of-the-day\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2015\/07\/css-scroll-snap-points.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":379,"url":"https:\/\/www.audero.it\/blog\/2015\/05\/27\/trick-of-the-day-sass-mixin-or-placeholder\/","url_meta":{"origin":392,"position":1},"title":"Trick of the day: Sass, Mixin or Placeholder?","author":"Aurelio De Rosa","date":"May 27, 2015","format":false,"excerpt":"Without any doubt, two of the best and most useful features of Sass are mixins and placeholders. A mixin is a directive similar to a function in programming languages in that you can pass arguments. However, a mixin outputs CSS code instead of returning a value as the result of\u2026","rel":"","context":"In "Trick of the day"","block_context":{"text":"Trick of the day","link":"https:\/\/www.audero.it\/blog\/category\/trick-of-the-day\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":56,"url":"https:\/\/www.audero.it\/blog\/2013\/07\/02\/how-to-solve-the-problem-of-font-face-inside-media-queries\/","url_meta":{"origin":392,"position":2},"title":"How to Solve the Problem of @font-face Inside Media Queries","author":"Aurelio De Rosa","date":"July 2, 2013","format":false,"excerpt":"Mobile connections aren't as good as the usual desktop ones, therefore the download time of custom fonts can take up to several seconds. A good approach is to use the @font-face rule only for certain range of media and screens using @media queries. Unfortunately this approach doesn't work for some\u2026","rel":"","context":"In "CSS"","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"A page with custom font not completely downloaded","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/06\/aeon-megazine-mobile-168x300.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":197,"url":"https:\/\/www.audero.it\/blog\/2013\/12\/23\/enhancing-the-abbr-element-on-mobile\/","url_meta":{"origin":392,"position":3},"title":"Enhancing the abbr Element on Mobile","author":"Aurelio De Rosa","date":"December 23, 2013","format":false,"excerpt":"Today's world runs fast, really fast. When writing, a lot of people use abbreviations and acronyms to save time that we can find spread all over the web. They are so used that an HTML tag, , was created to identify them and help the semantic of web pages. In\u2026","rel":"","context":"In "CSS"","block_context":{"text":"CSS","link":"https:\/\/www.audero.it\/blog\/category\/css\/"},"img":{"alt_text":"The abbr tag unstyled","src":"https:\/\/i0.wp.com\/aurelio.audero.it\/blog\/wp-content\/uploads\/2013\/12\/abbr-unstyled.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":329,"url":"https:\/\/www.audero.it\/blog\/2014\/09\/19\/resources-beginner-front-end-developers\/","url_meta":{"origin":392,"position":4},"title":"Resources for Beginner Front-end Developers","author":"Aurelio De Rosa","date":"September 19, 2014","format":false,"excerpt":"Few weeks ago I received an email from a developer asking me for suggestions on how to delve into the front-end world. After having replied to this email, I thought that it'd have been nice to share the same suggestions on my blog. That's exactly what you'll find in this\u2026","rel":"","context":"In "Discussions & Opinions"","block_context":{"text":"Discussions & Opinions","link":"https:\/\/www.audero.it\/blog\/category\/discussions-opinions\/"},"img":{"alt_text":"html5 css3 javascript logos","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2014\/09\/front-end-stack.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":612,"url":"https:\/\/www.audero.it\/blog\/2016\/11\/29\/most-used-npm-commands\/","url_meta":{"origin":392,"position":5},"title":"My most used npm commands","author":"Aurelio De Rosa","date":"November 29, 2016","format":false,"excerpt":"If you're a front-end or a JavaScript developer, you're surely using npm. npm is a registry where people publish their software. At the beginning, it was used to share JavaScript libraries and frameworks, but today you can also find CSS frameworks, font icons, and much more. In addition to being\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"npm","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/11\/npm.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/11\/npm.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/11\/npm.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2016\/11\/npm.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/comments?post=392"}],"version-history":[{"count":3,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"predecessor-version":[{"id":478,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions\/478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media\/393"}],"wp:attachment":[{"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.audero.it\/blog\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nhttp:\/\/codersblock.com\/blog\/fun-times-with-css-counters\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"