neoman neoman - 9 months ago 32
CSS Question

How to get different style in nested element depending to depth level?

i have nested element and i want that every level have different style

level 1, 5, 9, 13 ... (4n+1) style1

level 2, 6, 10, 14... (4n+2) style2

level 3, 7, 11, 17... (4n+3) style3

level 4, 8, 12, 18... (4n+3) style4

view exemples

how to get the 3rd exemple style without using many class when i have infinity level of nested ul

html

enter code here
<div id="content">
<h1>Exemple 1 neighbor ul and nth-child(an+b) pseudo class</h1>
<div class="exemple">
<ul class="clearfix">
<li> item 1 1st ul</li>
<li> item 2 1st ul</li>
<li> item 3 1st ul</li>
</ul>

<ul class="clearfix">
<li> item 1 2nd ul</li>
<li> item 2 2nd ul</li>
<li> item 3 2nd ul</li>
</ul>

<ul class="clearfix">
<li> item 1 3rd ul</li>
<li> item 2 3rd ul</li>
<li> item 3 3rd ul</li>
</ul>

<ul class="clearfix">
<li> item 1 4th ul</li>
<li> item 2 4th ul</li>
<li> item 3 4th ul</li>
</ul>
</div>
<h1>Exemple 2 nested ul and nth-child(an+b) pseudo class</h1>
<div class="exemple">
<ul class="clearfix">
<li> item 1 1st ul

<ul class="clearfix">
<li> item 1 2nd ul

<ul class="clearfix">
<li> item 1 3rd ul</li>
<li> item 2 3rd ul</li>
<li> item 3 3rd ul

<ul class="clearfix">
<li> item 1 4th ul</li>
<li> item 2 4th ul</li>
<li> item 3 4th ul</li>
</ul>

</li>
</ul>

</li>
<li> item 2 2nd ul</li>
<li> item 3 2nd ul</li>
</ul>

</li>
<li> item 2 1st ul</li>
<li> item 3 1st ul</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<h1>Exemple 3 nested ul and 4 class for different colors</h1>
<div id="exemple3">
<ul class="clearfix level1">
<li> item 1 1st ul

<ul class="clearfix level2">
<li> item 1 2nd ul

<ul class="clearfix level3">
<li> item 1 3rd ul</li>
<li> item 2 3rd ul</li>
<li> item 3 3rd ul

<ul class="clearfix level4">
<li> item 1 4th ul</li>
<li> item 2 4th ul</li>
<li> item 3 4th ul</li>
</ul>

</li>
</ul>

</li>
<li> item 2 2nd ul</li>
<li> item 3 2nd ul</li>
</ul>

</li>
<li> item 2 1st ul</li>
<li> item 3 1st ul</li>
</ul>
</div>
</div>


css

enter code here
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
#content{
width:500px;
margin:0 auto;
}
h1{text-align:center; font-size:2em;}
ul {list-style: none; padding:10px; margin:10px;}
ul li {color:#fff; float:left; margin:10px 30px; position:relative; white-space:nowrap;}
ul ul { position:absolute; top:31px; left:-50px}
ul ul ul { position:absolute; top:10px; left:116px}
.exemple ul:nth-child(4n+1) { background: navy; }
.exemple ul:nth-child(4n+2) { background: green; }
.exemple ul:nth-child(4n+3) { background: maroon; }
.exemple ul:nth-child(4n+4) { background: purple; }

#exemple3 .level1 { background: navy; }
#exemple3 .level2 { background: green; }
#exemple3 .level3 { background: maroon; }
#exemple3 .level4 { background: purple; }

Answer Source

JavaScript is this the best way:

function style(obj,depth){  
    switch (depth%6) {  
      case (0):  
         obj.addClass('level1');  
         break;  
      case (1):  
         obj.addClass('level2');  
         break;  
      case (2):  
         obj.addClass('level3');  
         break;  
      case (3):  
         obj.addClass('level4');  
         break;  
      case (4):  
         obj.addClass('level5');  
         break;  
      case (5):  
         obj.addClass('level6');  
         break;  
      }  
   }  

function color(nav){  
    $ul=nav.find('ul');  
    $ul.each(function(){  
        style($(this),$(this).parents("ul").length);  
    });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download