How to switch odd and even - nth-child and nth-of-type

Question

I have to alternate top: 0; and bottom: 0;

But my second row is a mirrored image of my first row.

This is what it should look like:

For some reason I have to use nth-of-type in the first row and nth-child in the second row.

• My question is why I can't use the same for both rows?

When I switch them, my layout is messed up.

I saw this post on stack, but it uses 8 css entries. which doesn't add anything in my case. (If I'm not going to add more cities.)

My HTML code: (8 times almost the same code)

    <a class="content-column content-column-quarter link-image favourite" href="#">

            <figure>
                <img src="img/london.jpg" alt="london" />
                <figcaption class="fc_down">London</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/bangkok.jpg" alt="bangkok" />
                <figcaption class="fc_up">Bangkok</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/maui.jpg" alt="maui" />
                <figcaption class="fc_down">Maui</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/paris.jpg" alt="paris" />
                <figcaption class="fc_up">Paris</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/stockholm.jpg" alt="stockholm" />
                <figcaption class="fc_up">Stockholm</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/alberta.jpg" alt="alberta" />
                <figcaption class="fc_down">Alberta</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/nairobi.jpg" alt="nairobi" />
                <figcaption class="fc_up">Nairobi</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/bruges.jpg" alt="bruges" />
                <figcaption class="fc_down">Bruges</figcaption>
            </figure>
    </a>

My CSS code:

#favourites figcaption {
    left: 0;
    padding: 20px;

    font-size: 32px;  }

    .favourite:nth-of-type(-2n + 4) figcaption {
        top: 0;
    }
    .favourite:nth-of-type(-2n + 3) figcaption {
        bottom: 0;
    }
    .favourite:nth-child(2n + 5) figcaption {
        bottom: 0;
    }
    .favourite:nth-child(2n + 6) figcaption {
        top: 0;
    }



.content-column {
    float: left;
    margin-bottom: 30px;
    box-sizing: border-box;  }

    .content-column-full {
        width: 100%;
    }
    .content-column-quarter {
        width: 22%;
        margin-right: 4%;  }

        .content-column-quarter:nth-child(4n+1) {
            margin-right: 0;
        }



.link-image {
    position: relative;  }

    .link-image figure {
        overflow: hidden;  }

        .link-image img {
            width: 100%;
            height: auto;
            transition: transform .2s ease-in-out, filter .2s ease-in-out;
        }
        .link-image figcaption {
            position: absolute;
            color: white;
        }

    .link-image:hover img {
        transform: scale(1.1);
        filter: grayscale(50%);
}

Answer 1

You could use flex in column and nth-child if you always have 2 rows of 4 items (else clarify ).

an id or a class on the main parent should be enough to style the repeating structure.

basic CSS needed

a {
  position: relative;
}

a figure figcaption {
  position: absolute;
  top:1em;
  left: 0;
  right: 0;    
}

a:nth-child(4n - 3)  figcaption,
a:nth-child(4n - 4)  figcaption {
  bottom:1em;
  top:auto;/* reset top value */
}

https://codepen.io/gc-nomade/pen/QqzrqG or snippet below to test behavior:

.gal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 50vw;/* height to force wrapping ... 2rows max here */
}
a {
  
  min-width: 17%;
  max-width: 25%;
  min-height:20vw;/*while loading image */
  margin: 0.5vw;
  position: relative;
  flex: 1;
}

a figure,
a img,
a figcaption {
  display: block;
  margin: 0;
  padding: 0;
}
a img {
  width: 100%;
}
a figure figcaption {
  position: absolute;
  padding: 1em;
  font-size:2vw;
  top:1em;
  left: 0;
  right: 0;
  color: red;
  text-shadow: 0 0 1px black;
}
a:nth-child(4n - 3)  figcaption,
a:nth-child(4n - 4)  figcaption {
  bottom:1em;
  top:auto;
}

<p>images need to be loaded , be patient...</p><div class="gal">
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/1"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>  
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/2"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/3"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/4"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/5"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/6"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/7"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
  <a href="#">
    <figure>
      <img src="http://lorempixel.com/400/400/city/8"/>
      <figcaption>My City </figcaption>
    </figure>
  </a>
</div>

Answer 2

If your pattern of caption orientation repeats every 8 items, why not use something like this?

.favourite figcaption  {
    top: 0;
}
.favourite:nth-of-type(8n + 1) figcaption,
.favourite:nth-of-type(8n + 3) figcaption,
.favourite:nth-of-type(8n + 6) figcaption,
.favourite:nth-of-type(8n + 8) figcaption {
    top: auto;
    bottom: 0;
}