0

I'm using sass in my project to apply css styling, here i have div items where all div's have same classes except few divs,

example: html

<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col not-wrap"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>
<div class="wrapper-col not-wrap"><p>jakajsf</p></div>
<div class="wrapper-col"><p>jakajsf</p></div>

above html has multiple divs with class name wrapper-col,but few div has also class not-wrap, i have scss here in which i want to apply styles having class name wrapper-col but not not-wrap class without modifying HTML

here is what i have tried, but its not working for me.

SCSS:

.wrapper-col{
    &:not(.not-wrap){
        p{
            /* styles here*/
        }
    }
}
CJAY
  • 6,989
  • 18
  • 64
  • 106
  • Possible duplicate of [How to create a css rule for all elements except one class?](https://stackoverflow.com/questions/2489674/how-to-create-a-css-rule-for-all-elements-except-one-class) – Adam Buchanan Smith May 24 '19 at 19:04

1 Answers1

1

The example you pass works fine!

Add a border as an example and you will see it: https://jsfiddle.net/o7hjv1ts/1/

.wrapper-col{
    &:not(.not-wrap){
        p{
            border: 1px solid red;
        }
    }
}
Nico Diz
  • 1,484
  • 1
  • 7
  • 20