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;}
.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.
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>