2

Pessoal tou fazendo um grid que exibe de 1 a n imagens sendo que em cada linha ele mostra 2 colunas. A estrutura HTML é esta:

<div id="container">
    <h2 class="linhasFotos">
        <a title="nome da linha" href="/lancamentos">
            <img src="../../public/images/foto-01.jpg" width="470" height="236" class="img-zoom"
                 alt="nome da linha"/>
        </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" width="470" height="236" class="img-zoom"
                 alt="nome da linha"/>
        </a>
    </h2>
    <h2 class="linhasFotos">
        <a title="nome da linha" href="/lancamentos"><
            <img src="../../public/images/foto-01.jpg" width="470" height="236" class="img-zoom"
                 alt="nome da linha"/>
        </a>
    </h2><
</div>

O CSS é este da classelinhaFotos:

.linhasFotos {
float:left;
margin-right: 20px;
overflow: hidden;
width: 470px;
height: 236px
}

A minha dúvida é como criar o seletor que vai colocar o margin-right=0 toda vez que elemento for o ultimo objeto da linha. Obrigado

4 Respostas 4

2

Podes fazer uso do seletor :nth-child para remover a margem a cada X elementos consoante a tua necessidade:

/* A cada 2 elementos, retira a margem */
.linhasFotos:nth-child(2n+2){
  margin-right:0;
}

Podes utilizar este teste do seletor :nth criado pelo pessoal do CSS-Tricks.

Exemplo

li:nth-child(2n+2){
  color:pink;
}
<ul>
  <li>1º</li>
  <li>2º</li>
  <li>3º</li>
  <li>4º</li>
  <li>5º</li>
  <li>6º</li>
  <li>7º</li>
  <li>8º</li>
</ul>

1
  • Deu certinho. Muito obrigado Commented 29/03/2015 às 17:53
2

Se você quiser garantir que está selecionando somente os elementos h2, de 2 em 2, é possível utilizar o seletor :nth-of-type. Assim sendo podemos misturar outros elementos juntamente com os h2, e ainda assim selecioná-los de 2 em 2.

Todos os browsers modernos suportam este seletor, mas o IE8 e outros mais antiquados terão problemas. Também tem uma tabela de compatibilidade ao final da página da MDN.

Em uma outra resposta, eu explico detalhadamente os seletores: :first-child, :last-child, :nth-child, :nth-last-child, :first-of-type, :last-of-type, :nth-of-type, :nth-last-of-type

No exemplo abaixo, adicionei uma DIV antes dos H2. Mas poderiam ser 2 DIVs ou nenhuma DIV, que não faria diferença... funcionaria em qualquer caso.

.linhasFotos {
  float: left;
  margin-right: 20px;
  overflow: hidden;
  width: 200px;
  height: 100px;
}
h2.linhasFotos:nth-of-type(2n+1) {
  clear: both;
}
h2.linhasFotos:nth-of-type(2n) {
  margin-right: 0;
}
#container {
  border: 1px solid black;
  overflow: hidden;
  display: inline-block;
}
<div id="container">
  <div>Esse div não influencia no CSS, pois usa-se `nth-of-type`</div>
  <h2 class="linhasFotos">
        <a title="nome da linha" href="/lancamentos">
            <img src="../../public/images/foto-01.jpg" width="200" height="100" class="img-zoom"
                 alt="nome da linha"/>
        </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" width="200" height="100" class="img-zoom"
                 alt="nome da linha"/>
        </a>
    </h2>
  <h2 class="linhasFotos">
        <a title="nome da linha" href="/lancamentos">
            <img src="../../public/images/foto-01.jpg" width="200" height="100" class="img-zoom"
                 alt="nome da linha"/>
        </a>
    </h2>
</div>

1
  • Tamb[em funcionou. Muito obrigado. Commented 29/03/2015 às 17:53
1

Utilize o seletor :last-child

.linhasFotos a:last-child {
    margin-right: 0;
}
1
  • olha eu tinha tentado este método, mas ele só funciona no último elemento é não no último elemento da linha. Exemplo se eu tiver 3 elementos será aplicado no terceiro e não no segundo elemento da linha que é o último que eu desejo. Commented 29/03/2015 às 16:50
0

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:

  1. 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.
  2. 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. =)
  3. 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.

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 .