Search code examples
css

how to exclude specific div inside a parent div

I wanna know how to apply style only into specific divs and not to all. I mean every divs inside <div class="parent">....</div>must have some style except div with the class="exception"

 <div class="parent">
   <div class='one'>...</div>
   <div class='two'> ....</div>
   <div class="exception">..</div>
   <div class="one">....</div>
 </div>

div.parent:not('.exception'){
  margin-bottom: 2em;
}

all the div inside div with class parent must have attribute margin-top: 2em except div with the class exception

Solution

  • You were close. But your selector means your style will take effect to .parent (div class="parent"> element). Instead target child elements like this

    .parent > div:not(.exception) {
  color: red;
}
    <div class="parent">
  <div class='one'>...</div>
  <div class='two'> ....</div>
  <div class="exception">..</div>
  <div class="one">....</div>
</div>