0

I'm trying to style all elements inside a class while excluding a specific one and it's children. I've made several attempts using the :not() selector but I could not achieve what I want. Any thoughts?

 <div class="orange">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>

  <div class="list">
    <ul>
      <li> li text 1</li>
      <li> li text 2 </li>
    </ul>
  </div>

</div>

Here is the link with the html and the styles. https://stackblitz.com/edit/js-p7krtp?file=style.scss

Lucas_Nt
  • 116
  • 1
  • 7
  • Does this answer your question? [Can I write a CSS selector selecting elements NOT having a certain class or attribute?](https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr) – Awais Jan 23 '20 at 10:45

2 Answers2

3

Use ">" the child combinator:

.orange {
  > :not(.list){
    color: orange
  }
}

This selects all children of .orange that do not have the .list class.

Leon
  • 171
  • 4
0

What best worked for me while trying to find a solution for this approach was trying it out in a fiddle. I find the accepted answer not exactly correct because the syntax should be:

.orange > :not(.list)
{
   background-color: orange;
}
Stefan Georgiev
  • 13
  • 6