Skip to content

Instantly share code, notes, and snippets.

@tavriaforever
Forked from tyv/dabblet.css
Created May 24, 2012 05:25
Show Gist options
  • Save tavriaforever/2779620 to your computer and use it in GitHub Desktop.
Save tavriaforever/2779620 to your computer and use it in GitHub Desktop.
списки и счетчики
/*
списки и счетчики
http://clck.ru/d/_DP820mM15kId
http://clck.ru/d/W3EGMhVZ15kIl
http://clck.ru/d/yvjcixu815kJJ
*/
ol, ul
{
list-style: none;
}
/* Нумерованные списки */
ol
{
counter-reset: multilevel;
}
ol li:before
{
counter-increment: multilevel;
content: counters(multilevel, '.', decimal);
color: #666;
font: italic 14px Georgia;
margin-right: 5px;
}
ol ol
{
margin: 5px 5px 5px 35px;
}
/* Чекбоксы и счетчик*/
ul
{
counter-reset: island-items;
}
ul input:checked
{
counter-increment: island-items;
}
p strong:after
{
content: counter(island-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":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment