How to add css for element using not selector

Question

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*/
        }
    }
}

Possible duplicate of How to create a css rule for all elements except one class? — Adam Buchanan Smith
– Adam Buchanan Smith, Commented May 24, 2019 at 19:04

Nico Diz · Accepted Answer · 2019-05-24 19:04:13Z

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;
        }
    }
}

answered May 24, 2019 at 19:04

Nico Diz

1,5001 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add css for element using not selector

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related