CSS Basic Tutorial

CSS Box Model

CSS3Basic Tutorial

CSS Reference Manual

CSS @rule(RULES)

CSS Layout (Web Layout)CSS word-wrap (Auto-wrap)

CSS Counter (Counter)

CSS counter counters are similar to variables. These are maintained by CSS, and these values can be incremented by CSS rules to track their usage.

CSS counter counters help in simple increment and display of numeric values generated based on CSS.

CSS Counter Properties

The following is a list of properties used with CSS counters:

counter-reset:to create or reset the counter.
counter-increment:to increase the counter value.
content:to insert the generated content.
counter() or counters() function:to add the counter value to the element.

Note: Before using CSS counters, you must use counter-reset creates it.

CSS Counter Online Example

Let's take an example to create a counter for the page and increase the counter value for each subsequent element.

Please refer to the following example:

Example

<!DOCTYPE html>　　
<html>　　　　　　
<head>　　
<style>　　
body {　　
　　　　counter-reset: section;　　
}　　
h2::before {　　
　　　　counter-increment: section;　　
　　　　content: "Section " counter(section) ": ";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>CSS Counters Counter Example:</h1>　　
<h2>Java Tutorial</h2>　　
<h2>HTML Tutorial</h2>　　
<h2>CSS Tutorial</h2>　　
<h2>Oracle Tutorial</h2>　　
<p><strong>Note:</strong> IE8　browser under declaration!DOCTYPE.</p>　　
</body>　　
</html>

Test and see‹/›

Note: In the above example, you can see that a counter is created for the page in the main selector, which adds a counter for each h2Elements increase the counter value and add "Section <counter value>:" at the beginning of each element.2elements.

CSS nested counters

You can also create a counter within a counter. This is called nested counter. Let's demonstrate nested counters with an example.

Please refer to the following example:

Example

<!DOCTYPE html>　　
<html>　　
<head>　　
<style>　　
body {　　
　　　　counter-reset: section;　　
}　　
h1　{　　
　　　　counter-reset: subsection;　　
}　　
h1::before {　　
　　　　counter-increment: section;　　
　　　　content: "Section " counter(section) ". ";　　
}　　
h2::before {　　
　　　　counter-increment: subsection;　　
　　　　content: counter(section) "." counter(subsection) " ";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>Java tutorials:</h1>　　
<h2>Core Java tutorial</h2>　　
<h2>Servlet tutorial</h2>　　
<h2>JSP tutorial</h2>　　
<h2>Spring tutorial</h2>　　
<h2>Hibernate tutorial</h2>　　
　　
<h1>Web technology tutorials:</h1>　　
<h2>HTML tutorial</h2>　　
<h2>CSS tutorial</h2>　　
<h2>jQuery tutorial</h2>　　
<h2>Bootstrap tutorial</h2>　　
　　
<h1>Database tutorials:</h1>　　
<h2>SQL tutorial</h2>　　
<h2>MySQL tutorial</h2>　　
<h2>PL/>SQL tutorial</h2>　　
<h2>Oracle tutorial</h2>　　
<p><strong>Note:</strong> Only in the case of specifying !DOCTYPE, IE8Only supports these properties.</p>　　
</body>　　
</html>

Test and see‹/›

Note:In the above example, you can see that a counter has been created for this section, and another nested counter named subsection has been created within this section.

Nested Counters of Different Levels

You can use nested counters to create outline lists. It helps you insert strings between nested counters of different levels.

Please refer to the following example:

Example

<!DOCTYPE html>　　
<html>　　
<head>　　
<style>　　
ol {　　
　　　　counter-reset: section;　　
　　　　list-style-type: none;　　
}　　
　　
li::before {　　
　　　　counter-increment: section;　　
　　　　content: counters(section,".") " " ;　　
}　　
</style>　　
</head>　　
<body>　　
<h2>Different Nested Level Counters</h2>　　
<ol>　　
　　<li>item</li>　　
　　<li>item　　
　　　　<ol>　　
　　　　　　<li>item</li>　　
　　　　　　<li>item</li>　　
　　　　　　<li>item　　
　　　　　　　　<ol>　　
　　　　　　　　　　<li>item</li>　　
　　　　　　　　　　<li>item</li>　　
　　　　　　　　　　<li>item</li>　　
　　　　　　　　</ol>　　
　　　　　　</li>　　
　　　　　　<li>item</li>　　
　　　　</ol>　　
　　</li>　　
　　<li>item</li>　　
　　<li>item</li>　　
</ol>　　
<p><strong>Note:</strong> Only in the case of specifying !DOCTYPE, IE8Only supports these properties.</p>　　
</body>　　
</html>

Test and see‹/›

CSS Layout (Web Layout)CSS word-wrap (Auto-wrap)