user422831 user422831 - 4 months ago 9
HTML Question

CSS :not pseudo code not working

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

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>

Comments