web-dev-qa-db-ja.com

最後以外のすべての要素のマージン

最後の要素を除くすべての要素にマージンを設定するための2行のCSSがあります。それを1行に組み合わせる方法はありますか？

これは私が現在持っているものです（働いています）：

.work img {
    margin-right: 10px;
}

.work img:last {
    margin-right: 0px;
}

私はそれを次のように変更してみました：

.work img:not(:last) {
    margin-right: 10px;
}

しかし、それは機能していませんか？なぜだと思いますか？

[〜＃〜] update [〜＃〜]画像は5つしかありません。私の他のオプションは、最初の4つにのみマージンを設けることです。

htmlcsscss-selectorsmargins
22
user4756836

あなたには小さな間違いがあります

変化する：

.work img:not(:last)

に

.work:not(:last-child)

チェック ここをフィドルしてください

22
ketan

これを試して ：

.work img {
    margin-right: 10px;
}

.work img:last-child {
    margin-right: 0px;
}

または

.work img:not(:last-child) {
    margin-right: 10px;
}

またはjQueryソリューション：

jQuery('.work img:not(:last)').css({marginRight: 10);

純粋なCSSを適用する場合は、ブラウザーでセレクターをサポートする必要があることに注意してください。

これを参照してください： http://caniuse.com/#search=%3Alast-child

1
Redy S

ブラウザの完全なサポートが必要な場合は、JavaScriptを使用するか、最後のimgに.lastクラスを追加することをお勧めします。そうでなければ、あなたはただ行うことができます：

.work img:last-child {
  margin: 0;
}
1
Sean Stopnik