2

How to use not selector to ignore specific ul li element from css?

<ul class="list">
 <li></li>
 <li>
   <ul>
     <li></li>
   </ul>
 </li>
 <li>
   <ul class="innerli">
     <li></li>
   </ul>
 </li>
</ul>

I have tried with below code but not working

.list li:not(.innerli li){padding-left:10px;width: 500px;}
Bhumi Shah
  • 8,909
  • 7
  • 57
  • 96
  • 1
    Possible duplicate of [nesting inside css :not() selectors](https://stackoverflow.com/questions/21770960/nesting-inside-css-not-selectors) – Rusty Nov 23 '17 at 12:33

2 Answers2

0

.list ul:not(.inner) li is the selector you are looking for I believe.

in .list look for all uls which are not having class .inner and from those take all list.

Rusty
  • 7,918
  • 10
  • 50
  • 72
user3154108
  • 1,204
  • 14
  • 23
0

You are supposed to check by ul:not(selector) as below snippet.

.list ul:not(.innerli) li {
  color: red;
}
<ul class="list">
  <li>Outer</li>
  <li>
    <ul>
      <li>Inner</li>
    </ul>
  </li>
  <li>
    <ul class="innerli">
      <li>Inner</li>
    </ul>
  </li>
</ul>

Update: If you wish to select both <li>Outer</li> as well then you have to go for multi-lines as below.

/*.list ul:not(.innerli) li {
  color: red;
}*/

ul:not(.innerli) li {
  color: red;
}

ul.innerli li {
  color: black;
}
<ul class="list">
  <li>Outer</li>
  <li>
    <ul>
      <li>Inner</li>
    </ul>
  </li>
  <li>
    <ul class="innerli">
      <li>Inner</li>
    </ul>
  </li>
</ul>
RaJesh RiJo
  • 4,102
  • 4
  • 20
  • 45