CSS :not pseudo code not working

Question

I want to apply :not pseudo code with li and with [aria-hidden=true] attribute. But it's not working. Please see my below code. HTML:

<li class=" timeframe"><h5 class=" timeframe-title">Jun<span>2015</span></h5>
<ol class=" milestones">
    <li class="milestone-wrapper even"></li>
    <li class="milestone-wrapper even" aria-hidden="true"></li>
    <li class="milestone-wrapper odd" aria-hidden="true"></li>
    <li class="milestone-wrapper even" aria-hidden="true"></li>
</ol>
</li>

CSS:

.milestones .milestone-wrapper:not(li[aria-hidden=true]) {
    padding-bottom: 40px;
    margin-bottom: 0px;
    color:red;
}

Answer 1

From MDN/CSS/:not :

The negation CSS pseudo-class, :not(X) , is a functional notation taking a simple selector X as an argument.

...

Syntax : :not(selector) { style properties }

[aria-hidden=true] is a selector on its own. Remove li from :not(li[aria-hidden=true]) :

 .milestones .milestone-wrapper:not([aria-hidden=true]) { padding-bottom: 40px; margin-bottom: 0px; color:red; } 

 <li class=" timeframe"><h5 class=" timeframe-title">Jun<span>2015</span></h5> <ol class=" milestones"> <li class="milestone-wrapper even"></li> <li class="milestone-wrapper even" aria-hidden="true"></li> <li class="milestone-wrapper odd" aria-hidden="true"></li> <li class="milestone-wrapper even" aria-hidden="true"></li> </ol> </li>