Вложенные и расширяемые папки - CSS-хитрости

Первоначально это была демонстрация Мартина Иванова, в которой для установки «состояния» каждой папки использовались скрытые флажки и смежные одноуровневые комбинаторы. Живая демонстрация с тех пор упала из Интернета, поэтому я размещу ее здесь с исходным кодом под ней.

См. Статью Криса Койера (@chriscoyier) «Вложенные папки пера, без JS» на CodePen.

.css-treeview ul, .css-treeview li ( padding: 0; margin: 0; list-style: none; ) .css-treeview input ( position: absolute; opacity: 0; ) .css-treeview ( font: normal 11px "Segoe UI", Arial, Sans-serif; -moz-user-select: none; -webkit-user-select: none; user-select: none; ) .css-treeview a ( color: #00f; text-decoration: none; ) .css-treeview a:hover ( text-decoration: underline; ) .css-treeview input + label + ul ( margin: 0 0 0 22px; ) .css-treeview input + label + ul ( display: none; ) .css-treeview label, .css-treeview label::before ( cursor: pointer; ) .css-treeview input:disabled + label ( cursor: default; opacity: .6; ) .css-treeview input:checked:not(:disabled) + label + ul ( display: block; ) .css-treeview label, .css-treeview label::before ( background: url("icons.png.webp") no-repeat; ) .css-treeview label, .css-treeview a, .css-treeview label::before ( display: inline-block; height: 16px; line-height: 16px;, vertical-align: middle; ) .css-treeview label ( background-position: 18px 0; ) .css-treeview label::before ( content: ""; width: 16px; margin: 0 22px 0 0; vertical-align: middle; background-position: 0 -32px; ) .css-treeview input:checked + label::before ( background-position: 0 -16px; ) /* webkit adjacent element selector bugfix */ @media screen and (-webkit-min-device-pixel-ratio:0) ( .css-treeview ( -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s; ) @-webkit-keyframes webkit-adjacent-element-selector-bugfix ( from ( padding: 0; ) to ( padding: 0; ) ) )

This Folder is Closed By Default

Ooops! A Nested Folder

Look Ma - No Hands!

First Nested Item
Second Nested Item
Third Nested Item
Fourth Nested Item


Item 1
Item 2
Item 3


Yet Another One

item
item
item
item
item
item
item
item


Disabled Nested Items

item
item
item
item
item
item
item
item


item
item
item
item


This One is Open by Default…

And Contains More Nested Items…

Look Ma - No Hands
Another Item
And Yet Another


Lorem
Ipsum
Dolor
Sit Amet


Can You Believe…

That This Treeview…

Does Not Use Any JavaScript…

But Relies Only
On the Power
Of CSS3


Item 1
Item 2
Item 3


This is a Folder With…

Some Nested Items…
Some Nested Items…
Some Nested Items…
Some Nested Items…
Some Nested Items…


Disabled Nested Items

item
item
item
item
item
item
item
item