0

Tenho uma galeria que irá repetir, a cada cinco fotos, ele pula pra baixo.

Só que, quando o elemento for o quinto, ou seja =5, quero que aplique um margin-right=0. Meu HTML:

<ul class="galeria">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Meu CSS:

.galeria li:first-child + li + li + li + li + li {
    margin-right: 0!important;
}

Ok, isso está funcionando perfeitamente, mas e quando for o elemento 10, 15, 20? Não gostaria de ter que colocar uma , no meu CSS e repetir a propriedade, tem uma forma mais fácil? existe soma pra isso? que funcione pro IE8

2 Respostas 2

3

Considerando sua edição: no IE8 não existe solução em CSS puro. Você terá de engessar o número de itens de lista nas suas regras, ou usar JavaScript. Abaixo, solução em CSS para browsers modernos.

Para isso você usa a pseudo-classe nth-child:

.galeria :nth-child(5n) {
    margin-right: 0 !important;
}

Um exemplo mais simples de visualizar (usando <ol> e alterado a cor a cada 5 itens):

.galeria :nth-child(5n) {
    color: red;
}
<ol class="galeria">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

1
  • Usei o +li +li +li ao invés do nth-child por causa do IE8 9/12/2014 às 17:08
1

Olá, basta fazer do modo abaixo que vai ter o que deseja.

.galeria li:nth-child(5n) {
    margin-right: 0!important;
}  

Para IE8, você pode utilizar JQUERY

$('.galeria li:nth-child(5n)').addClass('semMargem');

.semMargem{ margin-right: 0!important; }
1
  • Só que o nth-child não roda muito bem no IE8, por isso usei daquela forma. 9/12/2014 às 17:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .