2

CSS を使用して、少なくとも N 個の子を持つノードを選択したいと考えています。どのように？

目的は、ツリーにカラー バンド (「ガイドライン」) を適用することですが、親の下に 6 つ以上のノードがある場合に限ります。

私が得た JS、JQuery、およびサーバーサイド スクリプトの提案には、多少問題があります。たとえば、6人以上の子供を持つ親にクラスを追加できるようにするには、子供を注入するコードをハックする必要があります。そのため、コードを作成する前に、純粋な CSS でそれを行う方法があるかどうかを尋ねたかったのです。私は子供の数に関係なくバンディングに落ち着くかもしれません - それほどきれいではありませんが、十分に公平です。

4

4 に答える 4

1

css3には、仕事をすることができるいくつかの子セレクターがあります。

li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
    ... some style
}

このソリューションの功績は、それを発見した André Luís に帰属します。もちろん、それは css4 であり、まだサポートされていないため、親要素では機能しません。liただし、タグが 6 つある場合、または最初のタグのみの場合は、すべてのタグのスタイルを設定できますli。

before 疑似要素と組み合わせて、親スタイルを視覚的に作成できます。ul get のposition:relative. 次に、疑似要素を使用して親のスタイリングを偽造できます。

li:first-child:nth-last-child(6):before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:400px;
  height:20px;
  background:green
}

css セレクター nth-last-child はすべてのブラウザーでサポートされているわけではありませんが、Internet Explorer では javascript または IE7.js を使用できます。幸運を。

于 2013-01-30T21:41:51.447 に答える
1

ノードをカウントし、クラスを追加して目的のスタイルを適用する jQuery if ステートメントを使用することをお勧めします。

これが実際の例です: http://jsfiddle.net/WarrenBee/YeJyy/5

$(document).ready(function() {

    var nodeCount = $('.node').length;

    if( nodeCount > 6 ) {
        $('.node').addClass('nodeStyles');
    }

});
于 2013-01-30T21:23:48.610 に答える
0

CSS には、どの種類の親セレクターもまだありません。

ただし、JavaScript を使用してこれを行うことはできます。以下はjQueryの例 ( Fiddle ) です。

HTML

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

JavaScript:

jQuery(function($){
    $('ul').each(function(){
        if($(this).children('li').length >= 6){
            $(this).css('background-color', 'orange');
        }
    });
});
于 2013-01-30T21:33:36.770 に答える
0

CSS は子のプロパティに基づいて親を選択する方法を提供しないため、これは厳密には不可能です。

厳密な CSS ソリューションの場合、親要素にクラスを追加し、そのクラスのスタイルを設定します。必要に応じてクラスを手動で追加する代わりに、サーバー側でプログラムによって処理できます。

これは確かに JavaScript を使用して行うことができ、多くの利用可能な JavaScript ライブラリによってプロセスが簡素化されます。

于 2013-01-30T21:26:52.530 に答える