Apply CSS to first type and other conditions together

Question

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>

@CBroe it's pretty hard to go from the answers there to what OP asked. Tbh I think that what OP wants is not possible with CSS only — Christian Vincenzo Traina, Oct 10 '22 at 08:19
@ChristianVincenzoTraina Hi thanks for checking, please allow me update the condition and that is not working for new condition. I did try it before raising this~ — Mingze Li, Oct 10 '22 at 08:26
@ChristianVincenzoTraina _"Tbh I think that what OP wants is not possible with CSS only"_ - yes, same, and the explanation for that can be found in the duplicate, IMHO. Sometimes "not possible" _is_ the valid answer. — CBroe, Oct 10 '22 at 08:31
@MingzeLi just replace `:first-of-type` with `:nth-of-type(2)` — Christian Vincenzo Traina, Oct 10 '22 at 08:31
@ChristianVincenzoTraina Hi thanks the code is working, this correct my understand ing of nth-of-type. — Mingze Li, Oct 10 '22 at 08:41

Cédric · Accepted Answer · 2022-10-10T08:42:46.440

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>

Hi , could you help to check the new condition? Given answer will not apply for new condtions~ Thanks — Mingze Li, Oct 10 '22 at 08:27

Apply CSS to first type and other conditions together

1 Answers1