0

これは無理だと思います(-_-;)

CSS を使用して、段落リストの最後labelの段落を選択する必要がありますspan。

<div>
    <p>
        <span>
            <label>no good, because not the last</label>
        </span>
    </p>
    <p>
        <span>
            <label>good</label> <!-- This one should be selected -->
        </span>
    </p>
    <p>
        <label>no good, because is not inside of a span</label>
    </p>
</div>

事実上、セレクターは次のようになります。

div (p > span):last-child label {
    background: red;
}

しかし、CSS は (まだ) 括弧を理解していないと思います。

これは、ExtJS (Sencha) がラジオ ボタンをネストされたコンテナに配置するためです。spanボタンの可視性は、内部コンテナー (上記の例のタグ) で宣言されます。最後の VISIBLE ラベルの角を丸くしたいので、可視性を宣言する内側のコンテナを持つ最後の外側のコンテナを見つける必要があります。

おそらく、これには別の回避策がありますか？最後の手段として、jQuery ではなく構文をトラバースするネイティブな ExtJS コンポーネント/要素に基づいている限り、JS ソリューションを受け入れます。

必要に応じて詳細をお尋ねください。

4

1 に答える 1

1

CSS 4で部分的に可能になります (おそらく、セレクターが最終仕様に含まれるかどうかによって異なります) 。

!p > span {
    background: red;
}

しかし、これは最後のものだけでなく<p/>、内部を持つすべてを選択します。<span/>CSS は現在、:lastセレクターを認識していません。私が見る限り、CSS 4 でもこれは実装されません1。

要約は次のとおりです。現在、純粋な CSS でこれを行う方法はありません。

現在のところ、唯一のオプションは JavaScript を使用することです。jQuery のサンプルは次のようになります。

$('p:has(span)').last().css({ 'background': 'red' });

ここにデモがあります。

または、コメントで述べたように、extjs を使用する場合:

Ext.select('p:has(span):last').setStyle('background', 'red');

ここにデモがあります。

更新された質問への回答

新しい例では、親セレクターはもう必要ありません。部分的に機能する CSS は次のようになります。

div > p > span > label {
    background: red;
}

それでも: CSS 1にはセレクターがありません:last。上記の JavaScript サンプルを更新します。

jQuery :

$('div > p > span > label').last().css({ 'background': 'red' });

extJS :

Ext.select('div > p > span > label:last').setStyle('background', 'red');

1:lastセレクターについて:

より明確にするために::last-childそれが何であれ、dom 内の要素内の最後の子を選択します。サブクエリではありません。したがって、括弧バージョンが実装されたとして:last-childも、実際の最後の要素はクエリの一部ではないため、何も選択されません。結果セットの最後の項目を選択する一部の JavaScript ライブラリのようなセレクターが必要:lastになるため、サブクエリです。これはまったく別のセレクターであり、すぐに CSS の一部にはなりません。

于 2013-05-22T18:03:40.723 に答える