Apply CSS to first type and other conditions together

October 10, 2022

I got a few divs with class A, then I want to check that whether the first A has class B or not, if yes then apply some styles. Would like to use CSS only.

Update: the first div should be something else.
For example,

Condition 1:

<div class="container">    
  <div class="C"></div>
  <div class="A"></div> <!-- don't apply style -->
  <div class="A B"></div>
  <div class="A"></div>
  <div class="A B"></div>
</div>

Condition 2:

<div class="container">
  <div class="C"></div>    
  <div class="A B"></div> <!--apply style -->
  <div class="A"></div>
  <div class="A"></div>
  <div class="A"></div>
</div>

>Solution :

EDIT

As Christian Vincenzo Traina suggested in comment, select the second nth-of-type A that has the class B with .A:nth-of-type(2).B.

body {
  display: flex;
  justify-content: space-around;
}

.container {
  margin-bottom: 50px;
}

.A,
.C {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.A:nth-of-type(2).B {
  background-color: orange;
}

<div class="container">
  <div class="C"></div>
  <div class="A"></div>
  <!-- don't apply style -->
  <div class="A B"></div>
  <div class="A"></div>
  <div class="A B"></div>
</div>
<div class="container">
  <div class="C"></div>
  <div class="A B"></div>
  <!--apply style -->
  <div class="A"></div>
  <div class="A"></div>
  <div class="A"></div>
</div>

OLDER ANSWER

note : the older question asked without the div.C class

Select the first-of-type A that has the class B with .A:first-of-type.B

body {
  display: flex;
  justify-content: space-around;
}

.container {
  margin-bottom: 50px;
}

.A {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.A:first-of-type.B {
  background-color: orange;
}

<div class="container">
  <div class="A"></div>
  <!-- don't apply style -->
  <div class="A B"></div>
  <div class="A"></div>
  <div class="A B"></div>
</div>
<div class="container">
  <div class="A B"></div>
  <!--apply style -->
  <div class="A"></div>
  <div class="A"></div>
  <div class="A"></div>
</div>