css - select all ul elements except ul elements that are in a div with a specific class?-CodePudding

I have a global ul styles like below in my global.scss file:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

I need some way to manipulate this that not select ul's in a specific div with a class jodit-wrapper if I do something like below it doesn't work:

ul:not(.jodit-wrapper) {
    list-style: none;
    margin: 0;
    padding: 0;
}

what is the correct way for doing this?

CodePudding user response：

got it with this:

ul:not(.jodit-wrapper ul) {
    list-style: none;
    margin: 0;
    padding: 0;
}

CodePudding user response：

The jodit-wrapper class is for the parent div of the ul? if yes you need something like this:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jodit-wrapper ul {
  list-style: inside;
  margin: 10px;
  padding: 10px;
}

<div > 
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul> 
</div>
<div>
   <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>

If the jodit-wrapper class is for the ul then your code works.

CodePudding user response：

We need to not select the div that has the class jodit-wrapper.

/* do not select uls in any div which has a class jodit-wrapper */

div:not(.jodit-wrapper) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<div >
  <ul>
    <li>I should have default list style</li>
    <ul>
</div>
<div>
  <ul>
    <li>I should not have a list style</li>
  </ul>
</div>