3

HTMLをお持ちの場合：

<section class="column">
  <p> Some Test </p>
  <p> Some Test </p>
  <p> Some Test </p>
</section>

<section class="column">
  <p> Some More Test </p>
  <p> Some More Test </p>
  <p> Some More Test </p>
</section>

<section class="someotherclass">
  <p> Some More Test </p>
  <p> Some More Test </p>
  <p> Some More Test </p>
</section>

およびCSS：

.column:last-child { background:red; }

http://jsfiddle.net/WYu24/

:last-childセレクターにクラスの最後の出現をピックアップさせる方法はありますか？

4

1 に答える 1

3

現在、CSS には、特定のクラスを持つ最初または最後の子を見つけるためのショートカット構文または疑似クラスはありません。1

オーバーライド手法を使用して、特定のクラスを持つ最初の子のスタイルを設定します。これについては、この回答で詳しく説明します。ただし、兄弟コンビネータの仕組みにより、この手法は特定のクラスを持つ最後の子には適用できません。

特定のクラスを持つ最後の子を対象とする純粋な CSS の方法を知りません。そのためには、JavaScript を使用するか、マークアップを再構築する必要があります。そのような要素が 1 つだけある場合は、jQuery を使用して:lastセレクターを使用してクラスを追加し、CSS でスタイルを設定できます。

$('.column:last').addClass('last');

.column.last { background:red; }

jsFiddle プレビュー

1 Selectors 4 で提案されて いるいくつかの新しい疑似クラスがありますが、これは法案に適合しますが、ブラウザはさらに数か月間、または仕様がより安定するまで実装を開始しません。 -classes は、現在の構文がややぎこちないように見えるため、固執する予定です。

:nth-last-match(1 of .column) { background:red; }
于 2012-04-19T14:37:22.503 に答える