1

I have some markup that looks like this:

<section id="accreditation">
  <div class="container">
    <div class="row"></div>
    <div class="row-accreditation">
      <div class="col-md-4">
        <img>
      </div>
      <div class="row"></div>
    <div class="row-accreditation">
      <div class="col-md-4">
        <img>
      </div>
    </div>
  </div>
</section>

How can I select the img in the first .row-accreditation div? I've tried using first-of-type and first-child selectors but both do the same thing which is selecting both of the images. I also tried to recreate the accepted answer from this thread like so...

#accreditation div.row accreditation > img ~ img {blah}

...but without success.

Is this possible with css, and if so what is the best way to do it?

Community
  • 1
  • 1

1 Answers1

1

It does work this way in your particular example:

.row-accreditation:nth-child(2) > div > img { 
  ...
}

http://codepen.io/anon/pen/wzWwxK

But I don't know if the HTML structure will stay the same in your application.

Johannes
  • 64,305
  • 18
  • 73
  • 130