È possibile cambiare il colore di sfondo in base al livello annidato?

Question

Ho una lista ordinata che potenzialmente può avere una quantità infinita di elenchi annidati. Sto cercando di modificare dinamicamente lo di ogni elenco annidato in modo che diventi progressivamente più scuro, rendendo il raggruppamento di ciascuna lista molto più facile da comprendere.

Quindi ho questa struttura di base (che può continuare all'infinito):

<ol class="top-level-list"> 
    <li> 
     <ol> 
      <li> 
       <ol> 
        <li></li> 
       </ol> 
      </li> 
     </ol> 
    </li> 
</ol> 

In questo momento, posso fare questo usando qualcosa di simile:

.top-level-list li ol li ol li { 
    background: #D4D4D4; 
} 

.top-level-list li ol li ol li ol li{ 
    background: #C7C7C7; 
} 

che mi dà quello che voglio, ma è limitato a quanti livelli posso usare e ogni livello aggiunge sempre più dati al mio file CSS, con conseguente tempi di caricamento più lunghi.

C'è un modo per impostare dinamicamente il colore con un singolo selettore? So che CSS3 ha aggiunto alcuni nuovi trucchi per i selettori CSS, ma non riesco a trovare nulla che documenta qualcosa di simile. Né posso trovare un modo per fare in modo che un valore nel selettore corrisponda al selettore stesso.

Answer 1

Sort of. Non è esattamente quello che stai cercando, ma usando rgba per un background-color puoi fare una simulazione abbastanza decente, penso. http://jsfiddle.net/jRdQC/

.top-level-list ol { 
    background-color:rgba(0,0,0,.2); 
} 

I colori di sfondo 'layer' e quindi ottenere più scuro, come si va.

Answer 2

È possibile analizzare l'albero con javascript per evitare il carico CSS. È necessario prima di una funzione per la luminanza del colore:

function luminance(hex, lum) { 
    // validate hex string 
    hex = String(hex).replace(/[^0-9a-f]/gi, ''); 
    if (hex.length < 6) { 
     hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; 
    } 
    lum = lum || 0; 
    // convert to decimal and change luminosity 
    var rgb = "#", c, i; 
    for (i = 0; i < 3; i++) { 
     c = parseInt(hex.substr(i*2,2), 16); 
     c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); 
     rgb += ("00"+c).substr(c.length); 
    } 
    return rgb; 
} 

E poi si dovrà applicare un colore più scuro in base al livello nidificato.

var color = '#efefef'; 

// You could also get the styled color by using: 
// var color = $('.class-goes-here').css('background-color'); 

$('ol').each(function() { 
    var depth = $(this).parents('ol').length; 
    var darken_ratio = depth * .1; 

    var darker_color = luminance(color, -darken_ratio); 

    $(this).css('background-color', darker_color); 
}); 

Ecco il violino: http://jsfiddle.net/dDUaF/1/

È possibile rendere il colore più scuro aumentando il decimale nella variabile darken_ratio. Funzionerà anche con qualsiasi colore in esadecimale. Ad esempio: http://jsfiddle.net/dDUaF/4/