{"id":3002,"date":"2016-07-18T09:18:01","date_gmt":"2016-07-18T14:18:01","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1891"},"modified":"2016-07-18T09:18:01","modified_gmt":"2016-07-18T14:18:01","slug":"how-to-use-csss-counter-reset-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-use-csss-counter-reset-property\/","title":{"rendered":"How to Use CSS’s Counter-Reset Property"},"content":{"rendered":"

Most developers probably think of CSS as a means to bring designs to life, but CSS3 is\u00a0capable of going beyond aesthetics. CSS3’s counter-reset property can actually be used to assign chronological numbers to certain\u00a0sections and subsections of your HTML, which you can then use number certain elements. For this example, we’ll use the property to number the following code:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
HTML<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. &lt;<\/span>h1&gt;<\/span>Section 1&lt;<\/span>\/h1&gt;<\/span><\/div><\/li>\n
  2. &lt;<\/span>h2&gt;<\/span>Sub-Section of Section 1&lt;<\/span>\/h2&gt;<\/span><\/div><\/li>\n
  3. &lt;<\/span>h2&gt;<\/span>Sub-Section of Section 1&lt;<\/span>\/h2&gt;<\/span><\/div><\/li>\n
  4. &lt;<\/span>h1&gt;<\/span>Section 2&lt;<\/span>\/h1&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"Screen<\/p>\n

    To use it, the first thing you need to do is to define where\/when the counter should be reset:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. body{<\/span><\/div><\/li>\n
    2. counter-reset<\/span>:<\/span> section;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      This resets the counter to start from zero. You can add any name as the value of the counter-reset property and it will work the same, just make sure you\u00a0apply that name to the counter-increment property\u00a0later on if you intent to use the property to automatically number your HTML elements.<\/p>\n

      To number the elements, we need to tell the CSS to increment them. Since we’re going to be numbering h1 elements, our CSS should look like this:<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. h1:before<\/span>{<\/span><\/div><\/li>\n
      2. counter-increment<\/span>:<\/span> section;<\/span><\/div><\/li>\n
      3. content<\/span>:<\/span> counter(<\/span>section)<\/span>'. '<\/span>;<\/span><\/div><\/li>\n
      4. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        In the above code, we’re basically telling the CSS to start incrementing the section counter for all the h1 elements. So the first h1 element will be automatically numbered 1, the second will be 2, and so on. To apply these numbers to their corresponding elements, we use the content property<\/a> with the value ‘counter(section)’, so the value should always be counter + the name you assigned to the initial counter-reset property in your CSS (in parentheses!).<\/p>\n

        In the example we’re working with, we also decided to use\u00a0subsections (the h2 elements), which can be numbered similarly. First, you’ll need to start a new counter for the subsections:<\/p>\n

        \r\n\r\n\t\t
        \r\n\r\n\t\t
        \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
        css<\/div>\r\n\r\n\t\t\r\n\t\t
        \r\n\r\n\t<\/div>\r\n\t\r\n\t
        \r\n\t\t
        1. h1{<\/span><\/div><\/li>\n
        2. counter-reset<\/span>:<\/span> subsection;<\/span><\/div><\/li>\n
        3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

          To number them, the code is pretty much the same as numbering the h1 elements:<\/p>\n

          \r\n\r\n\t\t
          \r\n\r\n\t\t
          \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
          css<\/div>\r\n\r\n\t\t\r\n\t\t
          \r\n\r\n\t<\/div>\r\n\t\r\n\t
          \r\n\t\t
          1. h2:before<\/span>{<\/span><\/div><\/li>\n
          2. counter-increment<\/span>:<\/span> subsection;<\/span><\/div><\/li>\n
          3. content<\/span>:<\/span> counter(<\/span>section)<\/span>'.'<\/span> counter(<\/span>subsection)<\/span>'- '<\/span>;<\/span><\/div><\/li>\n
          4. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

            Your final product should look something like this:<\/p>\n

            \"Screen<\/p>\n

            Share and Enjoy !<\/h3>
            0<\/span><\/span>Shares<\/small><\/div>
            <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

            Most developers probably think of CSS as a means to bring designs to life, but CSS3 is\u00a0capable of going beyond aesthetics. CSS3’s counter-reset property can actually be used to assign chronological numbers to certain\u00a0sections and subsections of your HTML, which […]<\/p>\n

            Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165,173,174,175,181],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3002"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3002"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3002\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2754"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}