Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • An Overview To Counter-Reset Property In CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 162
    Comment on it

    Hello readers, Today in my blog I will discuss about Counter-reset property used in CSS.

     

    Introduction :-

    The Counter-Reset property basically uses both the counter-increment and content properties of CSS.

    The counter-increment property is used to create auto-incrementing counters within a web page while the content property helps us to display the counter values that has been generated.


     

    The Syntax for Counter-Reset is given below-:

    Syntax :-

    ( [<user-ident> <integer>?]+ | none )

    In the above syntax each element has its meaning where :-

    • <user-ident> This identifies the name of the counter that you want to reset.
    • <integer > The Integer uses the value to reset the counter.
    • None keyword is used to disable the counter.


     

    Below is an example showing the use of Counter-Reset Property, here is the code for it :-<

    !DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
    <title>Example of CSS counter-reset property</title>
    
    <style type="text/css">
    
    body {
    
    counter-reset: section;
    
    }
    
    h1 {
    
    counter-reset: category;
    
    }
    
    h1:before {
    
    counter-increment: section;
    
    content: " " counter(section) ". ";
    
    }
    
    h2:before {
    
    counter-increment: category;
    
    content: counter(section) "." counter(category) " ";
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <h1>Details</h1>
    
    <h2>Name</h2>
    
    <h2>Designation</h2>
    
    <h1>Qualification</h1>
    
    <h2>Graduate</h2>
    
    <h2>Master Graduate</h2>
    
    </body>
    
    </html> 

    Hence, the Counter-Reset property can be used for various purposes inside a web page.

     

    Note :- The Counter-Reset property  works on all modern browsers.

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: