Skip to content

Instantly share code, notes, and snippets.

@princed
Forked from tyv/dabblet.css
Created July 19, 2012 11:01
Show Gist options
  • Save princed/3143053 to your computer and use it in GitHub Desktop.
Save princed/3143053 to your computer and use it in GitHub Desktop.
списки и счетчики
/*
списки и счетчики
http://clck.ru/d/_DP820mM15kId
http://clck.ru/d/W3EGMhVZ15kIl
http://clck.ru/d/yvjcixu815kJJ
*/
.multilevel,
.multilevel ol
{
counter-reset: list;
font: 16px Helvetica, sans-serif;
list-style-type: none;
}
.multilevel li
{
counter-increment: list;
}
.multilevel li:before
{
content: counters(list, ".");
color: #666;
margin-right: 0.5em;
font-style: italic;
font-size: 80%;
}
.desertisland
{
list-style: none;
counter-reset: item;
}
.desertisland input[type = 'checkbox']:checked
{
counter-increment: item;
}
.desertisland + p strong:before
{
content: counter(item);
}
<ol class="multilevel">
<li>Траляля</li>
<li>Ололо</li>
<li>Бубубу
<ol>
<li>Траляля</li>
<li>Ололо</li>
<li>Бубубу</li>
<li>Мимими</li>
<li>Трололо
<ol>
<li>Бебебе</li>
<li>Зузузу</li>
<li>Фефефе</li>
</ol>
</li>
<li>Фифифи</li>
</ol>
</li>
<li>Мимими</li>
<li>Трололо</li>
<li>Фифифи</li>
<li>Хахаха
<ol>
<li>Зузузу</li>
<li>Фефефе
<ol>
<li>Траляля</li>
<li>Ололо
<ol>
<li>Бебебе</li>
<li>Зузузу</li>
<li>Фефефе</li>
<li>Няняня</li>
<li>Дудуду</li>
</ol>
</li>
</ol>
</li>
<li>Няняня</li>
<li>Дудуду</li>
<li>Ляляля</li>
</ol>
</li>
<li>Бебебе</li>
<li>Зузузу</li>
<li>Фефефе</li>
<li>Няняня</li>
<li>Дудуду</li>
</ol>
<hr>
<h2>На необитаемый остров необходимо взять</h2>
<ul class="desertisland">
<li><label><input type="checkbox"> Бинокль</label></li>
<li><label><input type="checkbox"> Спички</label></li>
<li><label><input type="checkbox"> Компас</label></li>
<li><label><input type="checkbox"> Соль</label></li>
<li><label><input type="checkbox"> Нож</label></li>
<li><label><input type="checkbox"> Консервы</label></li>
<li><label><input type="checkbox"> Книгу</label></li>
<li><label><input type="checkbox"> Розовую кофточку</label></li>
<li><label><input type="checkbox"> Шляпу с полями</label></li>
<li><label><input type="checkbox"> Карандаш</label></li>
</ul>
<p>Выбрано <strong></strong></p>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment