web-dev-qa-db-fra.com

Marge sur tous les éléments sauf le dernier

J'ai 2 lignes de CSS pour définir la marge sur chaque élément sauf le dernier. Existe-t-il un moyen de le combiner en 1 ligne?

C'est ce que j'ai actuellement (en train de travailler):

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

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

J'ai essayé de le changer en:

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

Mais ça ne fonctionne pas? Une idée pourquoi?

MISE À JOUR Je n'ai que cinq images. Mon autre option serait de n'avoir que des marges sur les quatre premiers.

htmlcsscss-selectorsmargins
22
user4756836

Vous avez une petite erreur

Changement:

.work img:not(:last)

à

.work:not(:last-child)

Vérifiez Fiddle Here.

22
ketan

Essaye ça :

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

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

ou

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

ou solution jQuery:

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

N'oubliez pas que votre navigateur doit prendre en charge le sélecteur si vous appliquez du CSS pur.

Voir ceci pour référence: http://caniuse.com/#search=%3Alast-child

1
Redy S

Si vous avez besoin d'une prise en charge complète du navigateur, je vous suggère d'utiliser du javascript ou d'ajouter une classe de .last sur la dernière img. Sinon, vous pourriez simplement faire:

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