Select all the child inside a div using :not or other workaround through CSS?-CodePudding

I have html something like this:

<style>
      .wrapper_1 {
        color: red;
      }
      .container *:not(.wrapper_1)  {
                   color: blue;
      }
      .wrapper_2{
        color: green;
      }
   </style>

<html>
   <body>
      <div >
         <div>
            <div>
               <div>
                  <span>This is the test content 1 .<span>
               </div>
               <div >
                    This is the test content 2
                  <br>
                  <span>This is the test content 3</span>
               </div>
               <span >This is the test content 4.</span>
            </div>
         </div>
      </div>
</html>

I have to apply or replace container CSS for all the children except the div having class wrapper_1(all the nested children). As I know I can do something like this: .container *:not(.wrapper_1) but it's not ignoring all the children inside .wrapper class, Is there any other workaround?

CodePudding user response：

you can learn here how to use :not CSS selector here :not css trick

.wrapper_1 {
  color: red;
}
.container *:not(.wrapper_1,.wrapper_1 > *){
  color: blue;
}
.wrapper_2 {
  color: green;
}

<div >
   <div>
      <div>
         <div>
            <span>This is the test content 1 .<span>
         </div>
         <div >
              This is the test content 2
            <br>
            <span>This is the test content 3</span>
         </div>
         <span >This is the test content 4.</span>
      </div>
   </div>
</div>

CodePudding user response：

Try with this style:

<style>
  .wrapper_1 {
    color: red;
  }
  .container *:not(.wrapper_1.*)  {
               color: blue;
  }
  .wrapper_2{
    color: green;
  }
</style>