Override child div property thats set as parentClass>div{} with a seperate child class

Question

I set property of all div tags inside a parent class using parentClass>div{ } method in css. Then i assign one of the div tag a seperate class named child. But anything i set in child doesnt affect that div tag.

.parent>div {
  padding: 10%;
  border: 1px solid green;
}

.child {
  padding: 0;
  border: 1px solid green;
}

<div class="parent">
  <div>something</div>
  <div class="child">CHILD</div>
</div>

How can I make child class effective.

Answer 1

The .parent>div selector has a higher CSS specificity than the .child selector. You'll need a way to increase the specificity of .child. You could use !important.

Another way would be to just use the .child class twice in the selector, as below

.parent>div {
  padding: 10%;
  border: 1px solid green;
}

.child.child {
  padding: 0;
  border: 1px solid green;
}

<div class="parent">
  <div>something</div>
  <div class="child">CHILD</div>
</div>

Another way would be to use .parent>div:not(.child) to ignore styling .child elements which are direct children of .parent

.parent>div:not(.child) {
  padding: 10%;
  border: 1px solid green;
}

.child {
  padding: 0;
  border: 1px solid green;
}

<div class="parent">
  <div>something</div>
  <div class="child">CHILD</div>
</div>