Skip to content

Instantly share code, notes, and snippets.

@smmurf
Created May 8, 2012 05:53
Show Gist options
  • Save smmurf/2632892 to your computer and use it in GitHub Desktop.
Save smmurf/2632892 to your computer and use it in GitHub Desktop.
Списки и счетчики
/**
* Списки и счетчики
*/
.multilevel,
.multilevel ol {
list-style-type: none;
counter-reset: listnumber;
}
.multilevel li {
position: relative;
margin-left: 2em;
counter-increment: listnumber;
}
.multilevel li:before {
position: absolute;
right: 100%;
padding-right: 1ex;
color: #555;
content: counters(listnumber, ".") " ";
font: italic smaller Georgia, "Times New Roman", serif;
}
.desertisland {
list-style: none;
counter-reset: items;
}
.desertisland input[type='checkbox']:checked {
counter-increment: items;
}
.desertisland + p strong:before {
content: counter(items);
}
<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