списки и счетчики

dabblet.css

/*
	списки и счетчики
	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);
}

dabblet.html

    <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>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}