How to select every third element that does not have a specific class?

Question

css

There is a list:

<a href="#" class="hidden">1</a>
<a href="#" class="hidden">2</a>
<a href="#" class="hidden">3</a>
<a href="#" class="hidden">4</a>
<a href="#" class="hidden">5</a>
<a href="#" class="hidden">6</a>
<a href="#" class="hidden">7</a>
<a href="#" class="hidden">8</a>
<a href="#" class="hidden">9</a>
<a href="#" class="visible">10</a>
<a href="#" class="visible">11</a>
<a href="#" class="visible">12</a>
<a href="#" class="visible">13</a>
<a href="#" class="visible">14</a>
<a href="#" class="visible">15</a>
<a href="#" class="visible">16</a>

It is necessary to select every third element that does not have a hidden class using css.
i.e. the 12th and 15th elements should be selected.
Tried like this:

a:not(.hidden):nth-child(3n){

}

Does not work

Answer 1

The selector is correct. But for it to work, you need a parent.
TYTS