CODEWITHSUNDEEP
htmlcss
user3756907
user3756907

Reputation: 47

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

I have html something like this:

.wrapper_1 {
  color: red;
}

.container *:not(.wrapper_1) {
  color: blue;
}

.wrapper_2 {
  color: green;
}
<div class="container">
  <div>
    <div>
      <div>
        <span>This is the test content 1 .</span>
      </div>
      <div class="wrapper_1">
        This is the test content 2
        <br>
        <span>This is the test content 3</span>
      </div>
      <span class="wrapper_2">This is the test content 4.</span>
    </div>
  </div>
</div>

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?

Upvotes: 0

Views: 60

Answers (2)

Aneeb
Aneeb

Reputation: 789

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 class="container">
   <div>
      <div>
         <div>
            <span>This is the test content 1 .<span>
         </div>
         <div class="wrapper_1">
              This is the test content 2
            <br>
            <span>This is the test content 3</span>
         </div>
         <span class="wrapper_2">This is the test content 4.</span>
      </div>
   </div>
</div>

Upvotes: 1

user1034461
user1034461

Reputation:

Try with this style:

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

Upvotes: 0

Related Questions