There might be cases, where You want to select element that does
not have particular attribute. Not have attribute might
actually mean two different aspects. One could consider empty
attribute like if it not exists, while other would said that the
element have attribute but empty. We will focus here on case
where we treat both empty or non existent attribute as non
existent.

The use case here is to select all bare links, in other words
those links that do not have any CSS class applied. To
select those elements, we need to use attribute selector twice,
once assuming empty content and the other one assuming no
attribute at all. To select elements without attribute we can use
not selector extension while for empty
attribute attribute just CSS attribute selector with empty
value.

Example

Selecting all a elements that do not have CSS class
applied:

a:not([class]), a[class=""]{
color: blue;
}

The first selector selects all a elements that do
not have class attribute, the latter one selects all with empty
class attribute. The same technique can be used to select any
other elements with empty attribute.

The selector will match for example:

<a href="//maslosoft.com"></a><a href="//maslosoft.com" class=""></a>

But will not match:

<a href="//maslosoft.com" class="btn btn-success"></a>

Selecting Elements That Don't Have Particular Attribute or Have
It Empty

As in class example we need to combine not attribute
selector with empty attribute selector:

Selecting Elements That Don't Have Particular Attribute

The slightly different case is when selecting element that do not
have attribute. The empty value means that attribute
is empty but it still exists. To select such elements
we will use only not operator.

For example let's use data-name custom attribute
selector:

The selector would contain only not operator, let's
use it on form elements: