web-dev-qa-db-ja.com

他の同一の子孫ではなく、直接の子のみをターゲットとするCSSセレクター

アイテムを動的に追加または削除でき、nレベルの深さでネストできるネスト可能なソート可能リストがあります。ネストすると、親として選択されたli要素に新しいul要素が挿入されます。リストの初期状態は次のようなものです。

<ul id="parent">
    <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li>
    <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li>
    <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a>
        <ul>
            <li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li>
            <li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li>
            <li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li>
            <li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li>
            <li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li>
            <li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li>                    
        </ul>
    </li>   
    <li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li>
    <li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li>
    <li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li>                    
</ul>

MooToolsを使用してソートなどを行っていますが、正常に機能しますが、ソート時に位置テキストを正しくリセットできません。私が使用しようとするすべてのCSSセレクターには、リストに属し、サブリストに属さないli要素だけでなく、子のallも含まれます。 id、position、およびtextを除き、すべてのリストの各li要素は他のすべての要素と同一であると仮定します。直接の子のみを取得するためのセレクターはありますか？これを行う別の方法はありますか？

前述のような子セレクターをいくつか試しました。

  • ul > li直接の子だけでなく、ulの子であるall li要素を選択します
  • #parent > li上記と同じです。

以下は、アイテムがドロップされたときに現在実行している関数です。ソートを処理せず、正常に機能し、位置を更新するだけです。 MooTools構文でもあることに注意してください。

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getElements('li a span[class=position]').each(function(pos){
            pos.set('text', posCount);
            posCount++;
        });
    });
}

現在、メインレベルでアイテムの順序を変更すると、サブリストも含めて1〜12のすべての番号が変更されます。サブリストの項目を変更すると、そのリストの正しい番号が得られますが、親リストは番号付けのすべての子li要素を誤ってカウントします。

これはいハックのように感じますが、うまくいきます：

var drop = function(){
    var ulCount = 1;
    $$('ul').each(function(item){
        if(item.get('id') != 'parent') { 
            item.set('id', 'id-'+ulCount);
        }
        var elId = item.get('id');
        var posCount = 1;
        $(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos){
            pos.set('text', posCount);
            posCount++;
        });
        ulCount++;
    });
}
javascriptcssmootoolscss-selectors
61
VirtuosiMedia
ul > li

直接の子のみを行います。したがって、たとえば、トップレベルのリスト要素のみを実行するには、次のように使用できます。

#parent > li

注：これはIE6ではサポートされていません。

後方互換性の一般的な回避策は、次のようなことを行うことです。

#parent li { /* style appropriately */ }
#parent li li { /* back to normal */ }

スタイルを適用してからオフにする必要があるため（そして、古い値が何であるかを必ずしも知っているとは限りません）、IE6にとって唯一の純粋なCSS回避策です。

Edit：Ok MooTools固有の問題があります。getElements（）は、直接の子だけでなく、すべての子孫を返します。 getChildren（） を使用します。

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getChildren("li").getElements("a span[class=position]").each(function(pos){
                pos.set('text', posCount);
                posCount++;
        });
    });
}

またはそのようなもの。

94
cletus

元の質問には答えられませんでした。 ：only-childは、only-childに子孫がない場合にのみ機能します。元の投稿は、子孫の包含はul> liによるものであるのに対し、実際には：only-childのバグによるものであることを示唆しています。逆説的に：first-childは、last-childと同様に、子孫を持つリストの最初の子を選択しますが、：only-childはそうではありません。 Firefoxでこれを確認しました、OperaおよびChrome。以下に例を示します。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<style>
.list>ul>li:only-child {color:red}
.list>ul>li:first-child {color:green}
.list>ul>li:last-child {color:blue}
</style>
</head>
<body>
<div class="list">
<ul><li>Item one</li><ul>
<l>Subitem one</li>
<li>Subitem two</li></ul></li><!--<li>Item two</li>
<li>Item three</li>-->
</ul></div>
</body></html>

：first-childルールと：last-childルールを有効にするには、最後の2つのアイテムのコメントを外します。したがって、 セレクターレベル3標準 の実装は、主要なブラウザーでは一貫性がありません。 ：only-childルールがあり、一意の子に子孫がある場合、：first-childルールはアクティブにしないでください。この例では、only-childは赤である必要がありますが、緑です。

0
user3483642