Como aplicar padding pra todos os a.button exceto os que tem um span, não sei como fazer, mas um exemplo:
a.button:not(span)
Pelo que eu sei, não tem como "selecionar" um elemento 'parent' ou 'child' através da propriedade :not
, diferente de um seletor :first-child
, por exemplo, ou :nth-child(n)
que consegue fazer essa seleção.
O que pode ser feito, é aplicar uma classe de negação juntamente do elemento que vai possuir o span, assim você pode negar que seja aplicado o css
àquele elemento, para isso usamos um css
semelhante a esse:
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
}
Veja o exemplo: http://jsfiddle.net/47x6g60z/
Outra solução seria de fazer o inverso, aplique o estilo somente àqueles que possuem o span como 'child', ficando assim: http://jsfiddle.net/47x6g60z/1/
Como não existe um modo de selecionar um parent ou child através do :not o modo mais fácil de conseguir o que você deseja, seria de definir a propriedade para todos os elementos e depois 'resetar' naqueles que você não deseja que tenha o estilo. Veja este exemplo: http://jsfiddle.net/47x6g60z/2/
Então você pode pegar a div principal e aplicar o css.
p:not(.principal span) {
/* efeito do css */
}
a
possui umspan
, não aplique o estilo a ele", então atualmente não é possível. Já foi proposto um seletor "pai", mas atualmente nenhum browser ainda o suporta. Veja essa pergunta no SOen para mais detalhes. P.S. A propósito, existe um seletor:not
, mas ele se aplica ao próprio elemento e não aos filhos dele