How can I target the first instance of a class in a row of classes

Question

Sorry I'm not quite sure how to articulate the question so perhaps this example is better.

I would like to target the following marked classes

<div class="wrapper">
   <div class="message bot"></div> <-- HERE
   <div class="message bot"></div>
   <div class="message human"></div> <-- HERE
   <div class="message bot"></div> <-- HERE
   <div class="message bot"></div>
   <div class="message human"></div><-- HERE
   <div class="message human"></div>
   <div class="message human"></div>
   <div class="message human"></div>
   <div class="message bot"></div> <-- HERE
   <div class="message bot"></div>
   <div class="message bot"></div>
</div>

Or if you could suggest a better question title that would be great also!

In response to the duplicate flag for this question I would say it is different due to there being a random amount of possible 'bot' divs or 'human' divs between each item.

Or perhaps if there is a lightweight JS function which could select it, that would also work. — Jack, Oct 13 '17 at 11:20
I don't blame you. Such a question is hard to articulate. It has been asked before, but in such [different](https://stackoverflow.com/questions/16678857/apply-style-to-first-element-in-a-row-of-similar-elements) and [specific](https://stackoverflow.com/questions/42588300/repeated-first-occurence-of-an-element) guises it is hard to cover all the bases. That's why duplicate questions get asked and, more importantly, are not seen as a bad thing. Provided you link to a suitable duplicate, of course... as the one who answered the linked question I agree it is not a suitable duplicate. — BoltClock, Oct 13 '17 at 11:31

dfsq · Accepted Answer · 2017-10-13T11:26:54.843

You could do something like this, but there could be limitations with this approach (with inherited styles):

.bot {
  color: red;
}

.human {
  color: green;
}

.human + .human,
.bot + .bot {
  color: inherit; /* reset necessary style back */
}

<div class="wrapper">
   <div class="message bot">bot</div> <!-- HERE -->
   <div class="message bot">bot</div>
   <div class="message human">human</div> <!-- HERE -->
   <div class="message bot">bot</div> <!-- HERE -->
   <div class="message bot">bot</div>
   <div class="message human">human</div> <!-- HERE -->
   <div class="message human">human</div>
   <div class="message human">human</div>
   <div class="message human">human</div>
   <div class="message bot">bot</div> <!-- HERE -->
   <div class="message bot">bot</div>
   <div class="message bot">bot</div>
</div>

@Bla...: https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean — BoltClock, Oct 13 '17 at 11:27

How can I target the first instance of a class in a row of classes

1 Answers1