Doubt with CSS selector

Question

People are doing a grid that displays from 1 to n images and in each row it shows 2 columns. The HTML structure is this:

<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>

The CSS is this of the classelinhaFotos:

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

My question is how to create the selector that will put margin-right=0 every time element is the last object of the line. Thank you

Answer 1

You can use the selector :nth-child to remove the margin to each X elements depending on your need:

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

You can use this selector test :nth created by the CSS-Tricks staff.

Example

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>

Answer 2

If you want to ensure that you are selecting only the elements h2, every 2, the selector can be used :nth-of-type. So we can mix other elements together with the h2, and still select them two by two.

All the modern browsers support this selector, but IE8 and other more old-fashioned ones will have problems. It also has a compatibility table to end of MDN page.

In another answer, I explain in detail the selectors: :first-child, :last-child, :nth-child, :nth-last-child, :first-of-type, :last-of-type, :nth-of-type, :nth-last-of-type

In the example below, I added a DIV before the H2. But it could be 2 Divs or no DIV, which would not make a difference... would work in any case.

.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>

Answer 3

Use the selector switch :last-Child

.linhasFotos a:last-child {
    margin-right: 0;
}

Answer 4

You want to put the margin-right for the last element of the line, but in the structure of its HTML, there is no defined line. To do so, I recommend creating a container for every two photos, as follows:

<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 -->  

This way, you have more control over each 'line' of images, and now you can use the selector :last-of-type to add the margin-right: 0, which was your question. your CSS would then be:

.container-imagens > .linhasFotos:last-of-type{margin-right: 0}

Remember that this selector will only work if, in your HTML, the elements .linhaFotos are the direct children of .container-imagens. You can read more about the selectors here.

The advantage of working with the :last-of-type is that if tomorrow, for whatever reason, you decide that your grid will contain three images - instead of two - on each line, you ensure that only the last element (i.e., the most right), will inherit the properties of the selector. Using the selectors as the :nth-child you hold the math in a way that can be difficult to escape later. I created a Pen as proof of concept, and you can see it here.

I recommend 3 things:

1. Avoid any inline style rule, such as width and height as tag attributes <img>. It is much easier (and prudent) to control such rules in a separate . css file.
2. Although HTML 5 is a magical entity and now allows this kind of thing (i.e., it will work), put anything other than text inside a tag <h2> is not a good practice, since this tag is a text. In your case, I see no reason to use <h2>, but each one is each one. =)
3. CSS allows you to cascade style rules, so you can dry your HTML to make it simpler. In your case, your selector would become .container-imagens > h2:last-of-type{margin-right: 0} , which is much easier to read and understand than "The last H2, son of the . container-images, will not have margin".

I hope I’ve helped! =)

EDIT: The third proof-of-concept container shows the leanest HTML, as I suggested in item 3.