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
  • 9,323
  • 7
  • 63
  • 104
  • 1
    Possible duplicate of [nesting inside css :not() selectors](https://stackoverflow.com/questions/21770960/nesting-inside-css-not-selectors) – Ikhlak S. 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.

Ikhlak S.
  • 8,578
  • 10
  • 57
  • 77
user3154108
  • 1,264
  • 13
  • 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,302
  • 4
  • 25
  • 46