CODEWITHSUNDEEP
css
steven
steven

Reputation: 33

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

Upvotes: 0

Views: 1192

Answers (3)

Khandaker Rasel
Khandaker Rasel

Reputation: 1

If the child items are input, label and div like this?

<div class="parent">
  <input class="input">...</input>
  <label class="label"> ....</label>
  <div class="exception">..</div>
</div>

Upvotes: 0

BenM
BenM

Reputation: 53246

You're almost there, but your selector should be: div.parent div:not(.exception):

div.parent > div:not(.exception) {
  margin-bottom: 2em;
}
<div class="parent">
  <div class='one'>...</div>
  <div class='two'> ....</div>
  <div class="exception">..</div>
  <div class="one">....</div>
</div>

Upvotes: 1

jank
jank

Reputation: 870

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>

Upvotes: 1

Related Questions