CODEWITHSUNDEEP
htmlcsscss-selectors
user4671351
user4671351

Reputation:

Selecting first instance of an element with css

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?

Upvotes: 1

Views: 1115

Answers (1)

Johannes
Johannes

Reputation: 67738

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.

Upvotes: 1

Related Questions