Apply css to all elements except some specific ones

Question

How to apply padding to all a. button except those who have a span, I don’t know how to do it, but an example:

 a.button:not(span)

Answer 1

As far as I know, there is no way to "select" a 'Parent' or 'Child' element through the property :not, other than a selector :first-child, for example, or :nth-child(n) who can make that selection.

What can be done is to apply a negation class together to the element that will have span, so you can deny that the css to that element, we use a css similar to that:

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
}

Take the example: http://jsfiddle.net/47x6g60z/

Another solution would be to do the opposite, apply the style only to those who have span as 'Child', thus staying: http://jsfiddle.net/47x6g60z/1/

---

Edited: Answer question of comment

Since there is no way to select a Parent or Child through the :not the easiest way to get what you want, would be to set the property for all elements and then 'reset' in those that you do not want to have the style. Take this example: http://jsfiddle.net/47x6g60z/2/

Answer 2

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

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