ネストされたレベルに応じて背景色を変更できますか？

Question

私は潜在的に入れ子リストの無限の量を持つことができる順序リストを持っています。私は動的に各ネストされたリストのbackground-colorを変更して、徐々に暗くなり、各リストのグループ化をはるかに理解しやすくしたいと考えています。

だから私は、この基本的な構造（つまり、無限に続けることができます）があります、私が欲しいものを私に与え

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

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

：今

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

を、私はこのようなものを使ってこれを実現することができます使用できるレベルは限られており、各レベルでCSSファイルにデータが追加されるため、ロード時間が長くなります。

1つのセレクタで色を動的に設定する方法はありますか？私はCSS3がいくつかの新しいCSSセレクタのトリックを追加したことを知っていますが、このようなことを文書化するものは何も見つかりません。セレクタ内の値をセレクタ自体に対応させる方法も見つけられません。

Answer 1

並べ替えあなたが探しているものと正確には一致しませんが、background-colorにrgbaを使用すると、かなりまともなシミュレーションを行うことができます。 http://jsfiddle.net/jRdQC/

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

背景色は「レイヤー」なので、行くほど暗くなります。

Answer 2

CSSの負荷を避けるために、javascriptを使用してツリーを解析できます。

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; 
} 

そして、あなたは、ネストされたレベルに基づいて、暗い色を適用する必要があります：あなたは、最初の色彩輝度のための機能が必要になります。ここで

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); 
}); 

はフィドルです：http://jsfiddle.net/dDUaF/1/

あなたはdarken_ratio変数に小数を増やすことで色を暗くすることができます。これは、16進数の色でも機能します。たとえば：http://jsfiddle.net/dDUaF/4/