Apply css to all but a few specific elements

As far as I know, you can not "select" a parent or child element through the :not property, other than a :first-child selector, for example, or :nth-child(n) that can make this selection .

What can be done is to apply a negation class along with the element that will have the span, so you can deny that the css is applied to that element, so we use a css similar to this: / p>

html:

<a class="button">Teste 1</a>
<a class="button">Teste 2</a>
<a class="button negado"><span>Teste 3</span></a>
<a class="button">Teste 4</a>

css:

a.button {
    background:#eee; //cor de fundo cinza
    padding:15px;
}

a.button:not(.negado) {
    background:#f0f; //tudo NÃO POSSUIR a classe .negado, terá o fundo rosa
}

See the example: link

Another solution would be to do the inverse, apply the style only to those who have the span as 'child', thus: link

Edited: Reply comment question

As there is no way to select a parent or child through: not the easiest way to get what you want, you would set the property for all elements and then 'reset' those you do not want to have the style. Here's an example: link

Then you can grab the main div and apply the css.

p:not(.principal span) {
  /* efeito do css */
}