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

Ash Archin 0
Viewed 38

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?

sass css html
3 Answers

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 class="jodit-wrapper"> 
  <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.

davidhuerta0

got it with this:

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

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 class="jodit-wrapper">
  <ul>
    <li>I should have default list style</li>
    <ul>
</div>
<div>
  <ul>
    <li>I should not have a list style</li>
  </ul>
</div>

A Haworth0
Related