web-dev-qa-db-ja.com

最後の子以外の要素のすべての子を選択する方法はありますか。

CSS3セレクターを使用して、最後の子以外のすべてを選択する方法

たとえば、最後の子だけを取得するのはdiv:nth-last-child(1)です。

csscss-selectorscss3
310
RyanScottLewis

:last-child擬似クラス に対して 否定擬似クラス:not() を使うことができます。 CSS Selectors Level 3が導入されたため、IE 8以下では機能しません。

:not(:last-child) { /* styles */ }
571
Nick Craver

それを簡単に：

スタイルをすべてのdivに適用し、最後のスタイルを：last-child：で再初期化できます。

例えばCSSのように：

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

またはSCSS：の場合

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}
  • 読みやすく覚えやすい
  • 実行が速い
  • ブラウザ互換（まだCSS3なのでIE9 +）
87
Sebastien Horin

Nick Craverの解決策は機能しますが、これを使うこともできます。

:nth-last-child(n+2) { /* Your code here */ }

CSS TricksのChris CoyierがNice ：nth tester を作りました。

27
Robin B

IE9が来ると、もっと楽になるでしょう。ただし、多くの場合、この問題は次のものを必要とする問題に切り替えることができます。

22
Nicholas Wilson

selectivizr と一緒にnick craverのソリューションを使用すると、クロスブラウザソリューション（IE6 +）が可能になります。

10
delphi

最後から要素を探すには

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>
0
Avinash Malhotra