Css - yet another tree view open / close and parent question - css

Question

I'm fighting with this for 2 days and it may be simple, but I'm not getting there.
I want to have a nice, clean tree view with multiple levels and I'm trying to first target children after root. I can do that, but I'm sure using ~ and + signs this may be simpler. Second I need the checkboxes to open / close the tree.
I know I can always use a pre made one, but I want need to learn.
Any help?
No javascript or query, pure css please.
ul.tree li a {
/* 1º Nível */
color: red;
}
ul.tree ul>li a {
/* 2º Nível */
color: blue;
}
ul.tree ul>ul li a {
/* 3º Nível */
color: yellow;
}
ul.tree ul>ul>ul li a {
/* 4º Nível */
color: green;
}
ul.tree ul>ul>ul>ul li a {
/* 5º Nível */
color: orange;
}
ul.tree>input.[type=checkbox]:checked ul.tree ul>li {
display: none;
}
<ul class="tree">
<li><input type=checkbox /><b>_root</b></li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
<li>
<ul class="pasta">
<li><input type=checkbox /><b>Pasta A</b></li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
<li>
<ul class="pasta">
<li><input type=checkbox /><b>Pasta A - 1</b></li>
<li class="ficheiro">ficheiro</li>
<li>
<ul class="pasta">
<li><input type=checkbox /><b>Pasta dentro da pasta A - 1</b></li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
<li>
<ul class="pasta">
<li><input type=checkbox /><b>Pasta dentro da pasta dentro da pasta A -1</b></li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
</ul>
</li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
</ul>
</li>
<li class="ficheiro">ficheiro</li>
</ul>
</li>
<li class="ficheiro">ficheiro</li>
</ul>
</li>
<li class="ficheiro">ficheiro</li>
<li class="ficheiro">ficheiro</li>
</ul>
the fiddle
example of what I made

Answer 1

Here's the code, and later I will link to the documentation and explain what I have done. I have validated the HTML. Strange syntax in CSS that you're seeing is BEM methodology. You should avoid targeting bare elements and always try to give them specific class.
JSFiddle - if you find it easier.
Please note: Although I have tried to use best practices both for HTML and CSS, this is NOT something you would do in production. It is too "hacky" and the "price" for pure css solution is much higher than if we decided to use a little bit of JS. But, nevertheless it was interesting to try and overcame the obstacles, that is - to propose the solution within the boundaries you have set.
label {
font-weight: bold;
}
/* LIST style hacks which allows us to avoid bullets before checkbox - unfortunately, we have to supply and fake the bullets with pseudo before element for every li where we want them */
ul {
list-style: none;
}
.ficheiro::before {
content: "•";
position: absolute;
left: -15px;
}
.pasta-1 .ficheiro::before {
content: "°";
position: absolute;
left: -15px;
top: 3px;
}
.pasta-2 .ficheiro::before {
content: "*";
position: absolute;
left: -15px;
top: 3px;
}
/* CHECKBOX hacks for selectively hiding and showing the parts of the tree */
.tree {
display: none;
}
#level-0:checked ~ .tree {
display: block;
}
.pasta-1,
.pasta-2,
.pasta-3,
.pasta-4 {
display: none;
}
#level-1:checked ~ .pasta-1 {
display: block;
}
#level-2:checked ~ .pasta-2 {
display: block;
}
#level-3:checked ~ .pasta-3 {
display: block;
}
#level-4:checked ~ .pasta-4 {
display: block;
}
/* LINKS */
.ficheiro {
position: relative;
}
.ficheiro__link--root {
color: red;
}
.ficheiro__link--level-1 {
color: blue;
}
.ficheiro__link--level-2 {
color: yellow;
}
.ficheiro__link--level-3 {
color: green;
}
.ficheiro__link--level-4 {
color: orange;
}
<input id="level-0" type="checkbox" />
<label for="level-0">_root</label>
<ul class="tree">
<li class="ficheiro"><a class="ficheiro__link--root" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--root" href="#">ficheiro</a></li>
<li>
<input id="level-1" type="checkbox" />
<label for="level-1">Pasta A</label>
<ul class="pasta-1">
<li class="ficheiro"><a class="ficheiro__link--level-1" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-1" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-1" href="#">ficheiro</a></li>
<li>
<input id="level-2" type="checkbox" />
<label for="level-2">Pasta A - 1</label>
<ul class="pasta-2">
<li class="ficheiro"><a class="ficheiro__link--level-2" href="#">ficheiro</a></li>
<li>
<input id="level-3" type="checkbox" />
<label for="level-3">Pasta dentro da pasta A - 1</label>
<ul class="pasta-3">
<li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
<li>
<input id="level-4" type="checkbox" />
<label for="level-4">Pasta dentro da pasta dentro da pasta A -1</label>
<ul class="pasta-4">
<li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-4" href="#">ficheiro</a></li>
</ul>
</li>
<li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--level-3" href="#">ficheiro</a></li>
</ul>
</li>
<li class="ficheiro"><a class="ficheiro__link--level-2" href="#">ficheiro</a></li>
</ul>
</li>
<li class="ficheiro"><a class="ficheiro__link--level-1" href="#">ficheiro</a></li>
</ul>
</li>
<li class="ficheiro"><a class="ficheiro__link--root" href="#">ficheiro</a></li>
<li class="ficheiro"><a class="ficheiro__link--root" href="#">ficheiro</a></li>
</ul>
Try to understand what is happening in the code, and why I have structured it the way I have. It's best way to learn. Meanwhile, I will prepare the links and explanations and append them in the later edit.
EDIT:
You can validate code with w3c validator. It will scream at you
because we're missing <!DOCTYPE html>, lang, title, etc. but
the code itself is valid.
MDN - li element:
permitted parents: <ul>, <ol>, or <menu>
permitted content: Flow content (basically, any element that is valid within <body>)
30 CSS selectors you should know - we were using sibling combinator ~ (number 9 on this list of 30)
CSS code could be much cleaner with the use of preprocessor such as SASS and mixins, or even with the simple nesting.
When you target elements several levels deep, you're increasing the specificity and make it extremely hard to maintain it later. You can try this specificity calculator to understand it better. That's why one of the best practices is to use classes. With good naming, the code basically documents itself and it's quite clear what your intention was. You immediately know which element belongs to which level just by looking at the class names.