CSS Counters

Counters Property, Nested Counters, CSS Counters, Work with CSS counters, Browser support, Outlisted list:

CSS counters are similar to the variables that are used to modify the look of the content according to where it is located on the page.

These CSS counters are maintained by CSS whose values can be incremented by CSS rules.

Numbering CSS Counters Properties

  • counter-reset: The counter-reset is used to reset a counter.
  • counter-increment: The counter-increment is used to incement the counter value.
  • content: Thecontent is used to insert generated content.
  • counter() OR counters() function: It is used to add the value of a counter to an element.

CSS Counter Properties Example

body {
     counter-reset: section;
  }
h4:before {
     counter-increment: section;
     content: "section" counter(section) ":";
  }

Output

HTML Interview Questions

CSS Interview Questions

JavaScript Interview Questions

NOTE: IE8 supports these properties only if a !DOCTYPE is specified.

Nesting Counters

The CSS nesting counter means that counters within the counter (means that headings and subheadings); for example, for more understanding you can see the example which one mentioned below:

Example of Nesting Counter

body {
     counter-reset: section;
  }
h3 {
     counter-reset: subsection;
  }
h3:before {
     counter-increment: section;
     content: "Section" counter(section) ". ";
  }
h4:before {
     counter-increment: subsection;
     content: counter(section) "." counter(subsection) " ";
  }

Output

Web Designing Interview Questions

HTML IQ

CSS IQ

JavaScript IQ

Programming Interview Questions

Java IQ

C/C++ IQ

ASP.NET IQ

Nesting Counter Example Explanation

In an upper example, we used <h3> as heading and <h4> as a subheading of <h3>.


CSS Counter Properties

  • content: The content property is used with the ::before and ::after pseudo-elements, to insert generated content.
  • counter-increment: The counter-increment property is used to increments one or more counters values.
  • counter-reset: The counter-reset property is used to create OR reset one OR more counters.

Browser Support

Browsers Chrome Edge Firefox Safari Opera
Support Yes Yes Yes Yes Yes

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved