How to update the style of an element within an element using js-CodePudding

In the javascript below, how would I designate the class btn that exists within the div id = 8? Also, if I needed to add "!important" to the background color, how would I do that?

$('#8 .btn')[0].style.background = 'white';

body{
  background-color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="8">
<div >
<div >
<div></div>
<a >...</a>
</div>
</div>
</div>

Thank you!

CodePudding user response：

this will probably help

<!DOCTYPE html>
 <html lang="en">
  <head>
   <title>Example</title>
  </head>
  <body style="background-color: red;">
   <div id="8">
    <div >
     <div >
      <div></div>
      <a >example ban</a>
     </div>
    </div>
   </div>
   <script type="text/javascript">
    
     const collection = document.getElementsByClassName("btn");
     collection[0].style.setProperty("background", "white", "important")
   
   </script>
  </body>
 </html>