override background color from a div without class with nth-child?-CodePudding

I would like to change the background color from all the div under the div with class=hamburger-react.

I don't have access to this piece of html, so I need to target the good div and !important override.

I tried with :

 div.close-overlay-btn:nth-child(2)  {
    background: rgba(0, 100, 172, 0.411) !important;
    }

     <div >
     <div  aria-expanded="true" role="button" tabindex="0" style="cursor: pointer; height: 48px; position: relative; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; user-select: none; width: 48px; outline: none; transform: rotate(-180deg);">
      <div style="background: #dc3545;height: 3px;left: 8px;position: absolute;width: 32px;top: 13px;transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s;transform: rotate(-45deg) translate(-7.07px, 7.07px);"></div>
      <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 23px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; opacity: 0;"></div>
      <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 33px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; transform: rotate(45deg) translate(-7.07px, -7.07px);"></div>
     </div>
    </div>

But didnt work.

Any tips ? since these div have no class it's a little bit more complicated than expected

CodePudding user response：

Your reference in your selectors is invalid. Try this:

.close-overlay-btn>.hamburger-react>div {}

There is no :nth-child(2) to .close-overlay-btn.

.close-overlay-btn is the grandparent, .hamburger-react is the parent, and all of the other divs nested in .hamburger-react are the children to the parent.

.close-overlay-btn>.hamburger-react>div {
  background: rgba(0, 100, 172, 0.411) !important;
}

<div >
  <div  aria-expanded="true" role="button" tabindex="0" style="cursor: pointer; height: 48px; position: relative; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; user-select: none; width: 48px; outline: none; transform: rotate(-180deg);">
    <div style="background: #dc3545;height: 3px;left: 8px;position: absolute;width: 32px;top: 13px;transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s;transform: rotate(-45deg) translate(-7.07px, 7.07px);"></div>
    <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 23px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; opacity: 0;"></div>
    <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 33px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; transform: rotate(45deg) translate(-7.07px, -7.07px);"></div>
  </div>
</div>

CodePudding user response：

If you really can't access/change the HTML, then the easy way is really using !important (which I do not advise in general) ^{Solution 1}

Other - better - solution, is remove the inline styles with JavaScript - and implement the same CSS but without !important ^{Solution 2}

You are using your selector the wrong way, try this:

.hamburger-react div

This will affect every div child of .hamburger-react

Solution 1

.hamburger-react div {
  background: rgba(0, 100, 172, 0.411) !important;
}

<div >
  <div  aria-expanded="true" role="button" tabindex="0" style="cursor: pointer; height: 48px; position: relative; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; user-select: none; width: 48px; outline: none; transform: rotate(-180deg);">
    <div style="background: #dc3545;height: 3px;left: 8px;position: absolute;width: 32px;top: 13px;transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s;transform: rotate(-45deg) translate(-7.07px, 7.07px);"></div>
    <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 23px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; opacity: 0;"></div>
    <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 33px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; transform: rotate(45deg) translate(-7.07px, -7.07px);"></div>
  </div>
</div>

Solution 2

document.querySelectorAll('.hamburger-react div').forEach(el => el.style.removeProperty('background'))

.hamburger-react div {
  background: rgba(0, 100, 172, 0.411);
}

<div >
  <div  aria-expanded="true" role="button" tabindex="0" style="cursor: pointer; height: 48px; position: relative; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; user-select: none; width: 48px; outline: none; transform: rotate(-180deg);">
    <div style="background: #dc3545;height: 3px;left: 8px;position: absolute;width: 32px;top: 13px;transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s;transform: rotate(-45deg) translate(-7.07px, 7.07px);"></div>
    <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 23px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; opacity: 0;"></div>
    <div style="background: rgb(255, 221, 2); height: 3px; left: 8px; position: absolute; width: 32px; top: 33px; transition: all 0.4s cubic-bezier(0, 0, 0, 1) 0s; transform: rotate(45deg) translate(-7.07px, -7.07px);"></div>
  </div>
</div>