Você quer colocar o margin-right
para o último elemento da linha, mas, na estrutura do seu HTML, não existe uma linha definida. Para tal, recomendo a criação de um container para cada duas fotos, da seguinte maneira:
<div id="container">
<div class="container-imagens>"
<h2 class="linhasFotos">
<a title="nome da linha" href="/lancamentos">
<img src="../../public/images/foto-01.jpg" class="img-zoom" alt=""/>
</a>
</h2><!--Toda página deve conter pelo menos 1 (uma) tag h2-->
<h2 class="linhasFotos">
<a title="nome da linha" href="/lancamentos">
<img src="../../public/images/foto-01.jpg" class="img-zoom" alt=""/>
</a>
</h2>
</div> <!-- end of .container-imagens -->
<div class="container-imagens">
.
.
.
</div> <!-- end of .container-imagens -->
</div> <!-- end of #container -->
Dessa maneira, você tem mais controle sobre cada 'linha' de imagens, além de que agora você pode usar o seletor :last-of-type
para adicionar o margin-right: 0
, que era a sua pergunta. o seu CSS então ficaria:
.container-imagens > .linhasFotos:last-of-type{margin-right: 0}
Vale lembrar que este seletor só vai funcionar se, no seu HTML, os elementos .linhaFotos
sejam filhos diretos de elementos .container-imagens
. Você pode ler mais sobre os seletores aqui.
A vantagem de trabalhar com o :last-of-type
é que se amanhã, por qualquer motivo, você decidir que seu grid vai conter três imagens - ao invés de duas - em cada linha, você garante que apenas o último elemento (i.e., o mais à direita), vai herdar as propriedades do seletor. Usando os seletores como o :nth-child
lhe prendem a matemática de uma maneira que pode ser difícil escapar depois. Eu criei uma Pen como prova de conceito, e você pode vê-la aqui.
Aproveito para recomendar 3 coisas:
- Evite qualquer regra de estilo inline, como
width
e height
como atributos da tag <img>
. É muito mais fácil (e prudente) controlar tais regras em um arquivo .css em separado.
- Apesar do HTML 5 ser uma entidade mágica e agora permitir esse tipo de coisa (i.e., vai funcionar), colocar qualquer coisa além de texto dentro de uma tag
<h2>
não é uma boa prática, uma vez que esta tag é uma tag de texto. No seu caso, não vejo razão que justifique o uso do <h2>
, mas cada um é cada um. =)
- O CSS permite que você cascateie as regras de estilo, portanto, você pode enxugar o seu HTML para que ele fique mais simples. No seu caso, o seu seletor tornar-se-ia
.container-imagens > h2:last-of-type{margin-right: 0}
, o que é muito mais fácil de ler e entender que "O último h2, filho do .container-imagens, não vai ter margem".
Espero ter ajudado! =)
EDIT: O terceiro container da prova de conceito mostra o HTML mais enxuto, como sugeri no item 3.