CSS Counter
Next ❯CSS Combinators
- turned_in_notCounter Properties
- content
- counter-increment
- counter-reset
Properties | Description |
---|---|
content | Used with the : :before and : :after to insert generated content |
counter-increment | Used to increment the counter value |
counter-reset | Used to create or reset a counter |
counter()
orcounters()
function - Adds the value of a counter to an element- Must declare
counter-reset
property before using counter
Topic 1: CSS
Topic 2: HTML5
Topic 3: HTML
Topic 4: Jquery
Countersubject
Counterclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
body {
counter-reset: section;
}
h5::before {
counter-increment: section;
content: "Topic " counter(section) ": ";
}
</style>
</head>
<body>
<h5>CSS</h5>
<h5>HTML5</h5>
<h5>HTML</h5>
<h5>Jquery</h5>
</body>
</html>
Counter CSS
body {
counter-reset: section;
}
h5::before {
counter-increment: section;
content: "Topic " counter(section) ": ";
}
This example counts every <h5>
elements it founds
Main Topic:
Sub Topic
Sub Topic
Sub Topic
Main Topic:
Sub Topic
Sub Topic
Sub Topic
Nesting Countersubject
Nesting Counterclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<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>
<h5 class="h1">Main Topic:</h5>
<h5 class="h2">Sub Topic</h5>
<h5 class="h2">Sub Topic</h5>
<h5 class="h2">Sub Topic</h5>
<h5 class="h1">Main Topic:</h5>
<h5 class="h2">Sub Topic</h5>
<h5 class="h2">Sub Topic</h5>
<h5 class="h2">Sub Topic</h5>
</body>
</html>
Nesting Counter CSS
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) " ";
}
This example counts every h1
class & h2
class elements it founds
- Main Topic
- Main Topic
- Sub Topic
- Sub Topic
- Sub Sub-Topic
- Sub Sub-Topic
- Sub Sub-Topic
- Sub Topic
- Main Topic
- Main Topic
Nesting Counterssubject
Nesting Countersclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.ol{
counter-reset: section2;
list-style-type: none;
}
.li::before {
counter-increment: section2;
content: counters(section2,".") " ";
}
</style>
</head>
<body>
<ol class="ol">
<li class="li">Main Topic</li>
<li class="li">Main Topic
<ol class="ol">
<li class="li">Sub Topic</li>
<li class="li">Sub Topic
<ol class="ol">
<li class="li">Sub Sub-Topic</li>
<li class="li">Sub Sub-Topic</li>
<li class="li">Sub Sub-Topic</li>
</ol>
</li>
<li class="li">Sub Topic</li>
</ol>
</li>
<li class="li">Main Topic</li>
<li class="li">Main Topic</li>
</ol>
</body>
</html>
Nesting Counters CSS
.ol{
counter-reset: section2;
list-style-type: none;
}
.li::before {
counter-increment: section2;
content: counters(section2,".") " ";
}
This example counts every ol
class & li
class elements it founds
❮ Prev Vertical Align
Next ❯CSS Combinators