Override child class css with parent class css

Question

I want to override all the child css with parent css

Below is the code which I am trying to use

.wrapper > * {
    font-family: arial !important;
    font-size: 13px !important;
}

<div class="wrapper">
    <div>Text 00
        <div>Text 1</div>
        <span>Text 2</span>
        <div>
            <div style="font-family: Helvetica; font-size: 18px;">Text 3</div>
            <div>Text 4</div>
        </div>
        <div>Text 5</div>
    </div>
    
    <div>Text 6</div>
</div>

Actual result:

Expected result:

score 3 · Accepted Answer · answered Jul 26 '22 at 10:08

Your selector was slightly wrong, remove the > so it just reads .wrapper * this will get all children of the wrapper. Where as .wrapper > * will only get elements one layer deep

/* ALL CHILDREN */
.wrapper * {
  color: green;
  font-family: arial !important;
  font-size: 13px !important;
}

/* FIRST LAYER OF CHILDREN */
.wrapper > * { color: red }

<div class="wrapper">
  <div>Text 00
    <div>Text 1</div>
    <span>Text 2</span>
    <div>
      <div style="font-family: Helvetica; font-size: 18px;">Text 3</div>
      <div>Text 4</div>
    </div>
    <div>Text 5</div>
  </div>

  <div>Text 6</div>
</div>

Override child class css with parent class css

1 Answers1

Linked