Without make-up there is no point in thinking about the idea. I have laid out the layout here: https://jsfiddle.net/kLfzb1nd/
$(document).ready(function(){ $('.collapsible').collapsible({ accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style }); }); .collapsible-header { background: rgba(255,248,224, 1); } .collapsible { margin: 0; padding: 0; box-shadow: none } <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/> <ul class="collapsible" data-collapsible="accordion"> <li class="active"> <div class="collapsible-header">Parent1</div> <div class="collapsible-body"> <ul class="collapsible" data-collapsible="accordion"> <li class="active"> <div class="collapsible-header">Parent1->Child1</div> <div class="collapsible-body"> <ul class="collapsible" data-collapsible="accordion"> <li class="active"> <div class="collapsible-header">Parent1->Child1->Child1</div> <div class="collapsible-body"> 1 </div> </li> <li class="active"> <div class="collapsible-header">Parent1->Child1->Child2</div> <div class="collapsible-body"> 2 </div> </li> </ul> </div> </li> <li class="active"> <div class="collapsible-header">Parent1->Child2</div> <div class="collapsible-body"> 2 </div> </li> </ul> </div> </li> </ul> <ul class="collapsible" data-collapsible="accordion"> <li class="active"> <div class="collapsible-header">Parent2</div> <div class="collapsible-body"> 2 </div> </li> </ul> <ul class="collapsible" data-collapsible="accordion"> <li class="active"> <div class="collapsible-header">Parent3</div> <div class="collapsible-body"> 3 </div> </li> </ul> There is a tree of elements, nesting can be huge, but I do not understand how to unify the task
Parent1 ---Child1 ------Child1-Child1 ------Child1-Child2 ---Child2 Parent2 Parent3 The task is to make each parent block different in color (there can be a thousand parent blocks, since the data and DOM are generated on the backend side), at least with an alpha channel (reduce a bit of transparency), but how can this be done without using JS?
The real situation is this, the fact is, it is not clear who is the parent of the child (if you make an internal margin, then the input goes)
The same can be noticed in the layout on jsfiddle 
It is not clear how the child elements correlate with the parent blocks, so it was proposed to reduce the alpha channel of the child elements more, but again, how to do it on CSS?
