Sectioned list example

1. level 1
   1. level 2
   2. level 2
   3. level 2
   4. level 2
      1. level 3
      2. level 3
      3. level 3
      4. level 3
2. level 1
   1. level 2
   2. level 2
   3. level 2
   4. level 2
      1. level 3
      2. level 3
      3. level 3
      4. level 3

html

<ol class="sectioned-1">
<li>level 1
	<ol>
		<li>level 2</li>
		<li>level 2</li>
		<li>level 2</li>
		<li>
			level 2
			<ol>
				<li>level 3</li>
				<li>level 3</li>
				<li>level 3</li>
				<li>level 3</li>
			</ol>
		</li>
	</ol>
</li>
<li>level 1
	<ol>
		<li>level 2</li>
		<li>level 2</li>
		<li>level 2</li>
		<li>
			level 2
			<ol>
				<li>level 3</li>
				<li>level 3</li>
				<li>level 3</li>
				<li>level 3</li>
			</ol>
		</li>
	</ol>
</li>
</ol>

CSS

.sectioned-1{
 border:1px solid #cde;
 padding-top:1em;
}
.sectioned-1 ol, .sectioned-1{
 counter-reset: sectioned-1;
}
.sectioned-1 li {
 list-style: none;
}
.sectioned-1 li:before {
 content : counters(sectioned-1, '.') '.\00a0 \00a0 \00a0';
 counter-increment : sectioned-1;
}

Sectioned headding example

.sectioned-2{
 counter-reset: section;
 display:block;
}
.sectioned-2 h1{
 counter-reset: subsection;
 display:block;
}
.sectioned-2 h2{
 counter-reset: childsection;
 display:block;
}
.sectioned-2 h1:before {
 counter-increment: section;
 content: "\7b2c" counter(section) "\7ae0\00a0 \00a0 \00a0";
}
.sectioned-2 h2:before {
 counter-increment:subsection;
 content: "\7b2c" counter(section) "\7ae0" counter(subsection) '\7bc0\00a0 \00a0 \00a0';
}

新着記事