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":170,"url":"https:\/\/www.audero.it\/blog\/2013\/09\/16\/15-tips-to-improve-your-jquery-selectors\/","url_meta":{"origin":392,"position":5},"title":"15 Tips to Improve Your jQuery Selectors","author":"Aurelio De Rosa","date":"September 16, 2013","format":false,"excerpt":"Who don't know what jQuery is and how it can help in developing a web project. Based on the latest statistics, jQuery is used on ~60% of the Quantcast Top 100k websites. We use it constantly and sometimes we tend to think it's almost magic, that jQuery is capable to\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/www.audero.it\/blog\/category\/javascript\/"},"img":{"alt_text":"jquery logo","src":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.audero.it\/blog\/wp-content\/uploads\/2013\/09\/jquery-logo.png?resize=1400%2C800&ssl=1 4x"},"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":"