Search code examples
cssimagecss-selectorsopacity

How use image opacity in combination with nth-child or nth-of-type in CSS?

I posted this question yesterday and was referred to some other answers.

Those answers helped me get the image displaying with the opacity I want, which is great, but the problem is that the next image I want to display is not being selected (I want drums once, than an electric guitar for the second row):

enter image description here

.concert .details .bg-image:nth-of-type(8n+1) {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(drums.png) 66% 33%;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}

.concert .details .bg-image:nth-of-type(8n+2) {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(electricguitar.png) 66% 33;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}
<div class="concerts">
  {% for concert in concerts %}
  <div class="concert">
    <div class="date">
      <span class="day">{{ concert.date.day }}</span>
      <span class="month">{{ concert.date|date:'F' }}</span>
      <span class="year">{{ concert.date.year }}</span>
    </div>
    <div class="details">
      <div class="bg-image"></div>
      <span class="headliner">{{ concert.headliner }}</span>
      <span class="support">{{ concert.support }}</span>
      <span class="price">{{ concert.price }}</span>
      <span class="notes"> {{ concert.notes }}</span>
      <span class="concert_website">
                <a href="{{ concert.website }}" target="_blank">
                  Event Website &#9835;
                </a>
              </span>
    </div>
    <div class="venue">
      <span class="venue_name">
                <a href="{% url 'concerts:venue_events' slug=concert.venue.slug %}">
                  {{ concert.venue.name }}
                </a>
              </span>
      <span class="address">{{ concert.venue.address }}</span>
      <span class="venue_website">
                <a href="{{ concert.venue.website }}" target="_blank">
                  Venue Website &#9833;
                </a>
              </span>
    </div>
  </div>
  {% endfor %}
</div>

Why is the electric guitar image not displaying in the second row? I'm certain it has to do with my nth-of-type selector, and I've tried every permutation of nth-of-type and nth-child I can think of, but clearly, I'm not understanding something. What am I doing wrong?

Solution

  • You need to put the nth-of-type on concert (bg-image is always the first child of the details div):

    /* you can cut down your css by adding all shared styles to one class*/

.concert .details .bg-image {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}

/* then you just change your backgrounds */
.concert:nth-of-type(8n+1) .details .bg-image {
  background: url(drums.png) 66% 33%;
}

.concert:nth-of-type(8n+2) .details .bg-image {
  background: url(electricguitar.png) 66% 33%;
}