覆盖没有类的div的背景颜色与nth-child？

Question

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 class="close-overlay-btn"> <div class="hamburger-react" 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

Answer 1

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 class="close-overlay-btn"> <div class="hamburger-react" 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>

Answer 2

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 class="close-overlay-btn"> <div class="hamburger-react" 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 class="close-overlay-btn"> <div class="hamburger-react" 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>