🥇 Um truque de CSS de um liner para espaçar itens

Freqüentemente, preciso dividir visualmente os itens HTML – seja por espaçamento ou de alguma outra forma. A maneira mais simples é:

.item {
    margin-right: 10px;
}

Isso é bom, temos espaçamento! Mas .. esse último item … Realmente não precisa de margem, precisa? Então, vamos remover isso:

.item {
    margin-right: 10px;
}

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

Mas isso é meio bobo, adicionar margem e depois removê-la! E se quisermos começar a espaçar com um preenchimento? Precisamos alterá-lo em dois lugares. Horrível!

Mas isso é muito legal:

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

Aproveitar!

ATUALIZAR

Conforme mencionado no comentário de @mattandersen , o seletor: not não é suportado no IE antes do IE9, portanto, sua abordagem é melhor se o suporte para IEs anteriores for necessário:

.item+.item { margin-left: 10px; }

Para esclarecer como funciona –

.item1+.item2

aplica-se apenas a elementos .item2 que vêm imediatamente após .item1. então

.item+.item

aplica-se a todos os elementos .item, exceto o primeiro. Leia mais aqui: http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors .

Obrigado Matt!

ATUALIZAR

Related Posts