- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - counter-reset Property
To make use of the CSS counter property, the first step involves its creation through the counter-reset property. This initiates the process of resetting the counter. When using the counter-reset property, counter is intitialised to zero by default.
Possible Values
<custom-ident> − The name of a counter. The name can be any string value.
<integer> − (optional) The default value to which the counter resets each time the element appears. This value can be zero, or even negative. If no integer is provided, the counter is reset to zero.
none − There will be no reset of counters.
Syntax
counter-reset: <counter name> <integer> | reversed( <counter-name> ) <integer> ;
Applies to
All the HTML elements.
CSS counter-reset - <custom-ident> Value
Here is an example of counter-reset:
<html> <head> <style> body { counter-reset: heading; } h1::before { counter-increment: heading; content: "Heading " counter(heading) ": "; } </style> </head> <body> <h1>Introduction</h1> <p>This is the introduction section.</p> <h1>Background</h1> <p>This is the background section.</p> <h1>Conclusion</h1> <p>This is the conclusion section.</p> </body> </html>
CSS counter-reset - <integer> Value
This program demonstrates the usage of the counter-reset property with an integer value. In this example, we set the counter-reset property on the body element to head-counter 5, which resets the value of the head-counter counter to 5.
<html> <head> <style> body { counter-reset: head-counter 5; } h1::before { counter-increment: head-counter; content: counter(head-counter) " -"; } h2::before { counter-increment: head-counter; content: counter(head-counter) " -"; } h3::before { counter-increment: head-counter; content: counter(head-counter) " -"; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h3>Heading 3</h3> <h2>Heading 2</h2> <h1>Heading 1</h1> </body> </html>
CSS counter-reset - Reversing a counter
The counter-reset property takes value reversed. It is used to reverse the counter.
This works only in Firefox browser as of now.
h1 { counter-reset: reversed(item) ; /* Sets the reversed flag on the item counters. Sets the items to the number of elements */ } p { counter-reset : reversed(unit) ; /* Sets the reversed flag on the unit counters. Sets the units to the number of elements */ }
Following example demonstares this feature (Execute this example in Firefox browser):
<html> <head> <style> body { counter-reset: reversed(chapter); } h1::before { counter-increment: chapter -1; content: "Chapter " counter(chapter) ": "; } </style> </head> <body> <h1>Introduction</h1> <p>This is the introduction of the book.</p> <h1>Unit One</h1> <p>This is the first unit of the book.</p> <h1>Unit Two</h1> <p>This is the second unit of the book.</p> <h1>Unit Three</h1> <p>This is the third unit of the book.</p> </body> </html>
To Continue Learning Please Login
Login with Google