Styling com CSS2 quando attr não está definido
-
20-09-2019 - |
Pergunta
Styling um elemento com um conjunto de atributos é fácil:. E[attr]
Existe alguma maneira de denominar um elemento com CSS2 com base na ausência de um atributo, algo como isto E[!attr]
? (Solução de JavaScript não é uma opção).
Por exemplo, há várias regras de classe seguido pela regra id:
.abc {padding:1em;}
.def {padding:2em;}
#n a {padding:0;}
O código html é:
<div id="n"><a href="" class="abc">.</a><a href="" class="def">.</a></div>
Classes abc
e def
têm prioridade lowerer contra o domínio id-ed para que ambos a
têm estofo 0. Eu não posso mudar a sequência das regras acima, mas eu posso mudar regra id-ed adicionar minhas próprias regras. Eu quero evitar escrever regras como #n a.abc
para cada classe (há estiver muitos). Em vez disso eu preciso de algo como #n a[!class]
para manter todos os a
s ed classe intacta.
Solução
Infelizmente, não em CSS2. O melhor que você pode fazer é em cascata suas declarações:
E {color: red}
E[attr] {color: blue}
Mas mesmo isso não pode realmente ser invocado, como o IE6 não seletores de atributos honra.
Em CSS3, porém, não é a linda ": não" seletor pseudo ( http://www.w3.org/TR/css3-selectors/#negation ).
Editar
Obrigado por esclarecer. Que tal:
.abc {padding:1em; !important} .def{padding:2em; !important}
#n a{padding: 1em}
Outras dicas
Eu não acho que isso pode ser feito em CSS2. Em CSS3, você pode usar o "não" sintaxe :
input:not([type="file"])