Select last in hierarchy
HTML
<div class="tree">
<div>
<input type="checkbox" checked="checked" id="p"/>
<label for="p">Parent</label>
<ul>
<li>
<div>
<input type="checkbox" checked="checked" id="a01"/>
<label for="a01">A</label>
<ul>
<li>
<div>
<input type="checkbox" checked="checked" id="a02"/>
<label for="a02">A.1</label>
<ul>
<li>
<div>
<input type="checkbox" checked="checked" id="a11"/>
<label for="a11">A.1.1</label>
</div>
</li>
<li>
<div>
<input type="checkbox" checked="checked" id="a12"/>
<label for="a12">A.1.2</label>
</div>
</li>
<li>
<div>
<input type="checkbox" checked="checked" id="a13"/>
<label for="a13">A.1.3</label>
</div>
</li>
</ul>
</div>
</li>
<li>
<div>
<input type="checkbox" checked="checked" id="a03"/>
<label for="a03">A.2</label>
<ul></ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<div>
<input type="checkbox" checked="checked" id="b02"/>
<label...
CSS
.tree ul{
list-style-type: none;
}
.extra-padding{
padding: 15px;
}
.tree input[type=checkbox]{
display: none;
}
.tree input[type=checkbox]::before{
border: 3px solid black;
}
.tree div {
position: relative;
}
.tree label::before {
content: "\00A0\00A0\00A0"; /* create space */
}
.tree input[type=checkbox]:not(:checked) ~ ul > li:first-child::before {
content: "+ ";
position: absolute;
top: 0;
left: 0;
visibility: visible;
}
.tree input[type=checkbox]:checked ~ ul > li:first-child::before {
content: "- ";
position: absolute;
top: 0;
left: 0;
visibility: visible;
}
.tree ul li .list-group-item{
border: 0;
}
.tree input[type=checkbox]:not(:checked) ~ ul {
height: 0;
visibility: hidden;
margin: 0;
overflow: hidden;
}