Posso escrever um selector de CSS a seleccionar elementos que não tenham uma determinada classe?
gostaria de escrever uma regra do selector de CSS que selecciona todos os elementos que não têm uma certa classe. Por exemplo, dado o seguinte HTML:
<html class="printable">
<body class="printable">
<h1 class="printable">Example</h1>
<nav>
<!-- Some menu links... -->
</nav>
<a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
<p class="printable">
This page is super interresting and you should print it!
</p>
</body>
</html>
Eu gostaria de escrever um selector que selecciona todos os elementos que não têm a classe "printable" que, neste caso, são os nav e a elementos.
Isto é possível? Nota: no HTML atual onde eu gostaria de usar isso, haverá muito mais elementos que não tenha a classe "printable" do que tem (eu sei que é o contrário no exemplo acima).9 answers
Normalmente adiciona-se um selector de classes à pseudo-classe :not()
Assim:
:not(.printable) {
/* Styles */
}
Mas se precisar de um suporte melhor para o navegador (IE8 e older não suportam :not()
), provavelmente é melhor criar regras de estilo para os elementos que do têm a classe "printable". Se mesmo isso não for viável, apesar do que você diz sobre a sua marca real, você pode ter que trabalhar a sua marcação em torno dessa limitação.
.printable
, ou de outra forma afetá-los de uma forma ou de outra. Por exemplo, embora display
não seja herdado, a configuração display: none
Num :not(.printable)
irá impedi-lo e a todos os seus descendentes de mostrar, uma vez que remove o elemento e a sua sub-árvore do layout completamente. Você pode muitas vezes contornar isso usando visibility: hidden
em vez disso, o que permitirá que os descendentes visíveis para mostrar, mas os elementos escondidos ainda afetará o layout como eles originalmente. Resumindo, tem cuidado.
:not([class])
Na verdade, isto irá seleccionar qualquer coisa que não tenha uma classe css (class="css-selector"
) aplicada a ela.
Fiz uma demonstraçãojsfiddle
h2 {color:#fff}
:not([class]) {color:red;background-color:blue}
.fake-class {color:green}
<h2 class="fake-class">fake-class will be green</h2>
<h2 class="">empty class SHOULD be white</h2>
<h2>no class should be red</h2>
<h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
<h2 class="">empty class2 SHOULD be white</h2>
<h2>no class2 SHOULD be red</h2>
Isto é suportado? Sim . Caniuse.com (accessed 25 Ago 2014):
- Suporte: 88, 85%
- suporte parcial: 4, 36%
- Total: 93,21%
selector[class] /* the oposite of :not[]*/
:not
pseudo-classe de negação
A negação da pseudo-classe CSS,
:not(X)
, é uma notação funcional. tomando um selector X simples como argumento. Corresponde a um elemento que não é representado pelo argumento. X não deve conter outro selector de negação.
Pode usar :not
para excluir qualquer subconjunto de elementos correspondentes, ordenados de acordo com o que faria com os selectores de CSS normais.
Exemplo simples: excluindo por classe
div:not(.class)
Seleccionaria todos os elementos div
sem a classe .class
div:not(.class) {
color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
Exemplo complexo: excluindo por tipo / hierarquia
:not(div) > div
Seleccionaria todos os elementos div
que não são filhos de outro div
div {
color: black
}
:not(div) > div {
color: red;
}
<div>Make me red!</div>
<div>
<div>...but not me...</div>
</div>
Exemplo complexo: acorrentar pseudo-selectores
Com a notável excepção de não sendo capaz de chain / nest :not
selectores e pseudo-elementos, você pode usar em conjunto com outros pseudo-selectores.
div {
color: black
}
:not(:nth-child(2)){
color: red;
}
<div>
<div>Make me red!</div>
<div>...but not me...</div>
</div>
Suporte do navegador, etc.
:not
é um CSS3 nível seletor, a principal excepção, em termos de suporte é que é IE9+
A especificação também faz um ponto interessante:
O pseudo permite que os selectores inúteis seja escrito. Para instância
:not(*|*)
, que não representa nenhum elemento, oufoo:not(bar)
, o que é equivalente afoo
mas com um especificidade.
:not(.printable)
Apenas gostaria de contribuir para que as respostas acima de: not() podem ser muito eficazes em formas angulares, em vez de criar efeitos ou ajustar a vista/DOM,
input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}
Garante que ao carregar a sua página, os campos de entrada só irão mostrar o inválido (contornos vermelhos ou fundos, etc.) se tiverem Dados adicionados (ou seja, já não estão intactos) mas são inválidos.
Exemplo
[class*='section-']:not(.section-name) {
@include opacity(0.6);
// Write your css code here
}
/ / opacidade 0, 6 toda a "secção-" mas não"secção-nome"
Pode utilizar :not(.class)
o selector tal como mencionado anteriormente.
Se se preocupa com a compatibilidade com o Internet explorer, recomendo que use http://selectivizr.com/.
Mas lembre-se de passar por apache, caso contrário não verá o efeito.Usando a pseudo classe :not()
:
Para seleccionar tudo menos um determinado elemento (ou elementos). Podemos usar o :not()
pseudo classe css . A pseudo classe :not()
requer um selector CSS
como argumento. O selector irá aplicar os estilos a todos os elementos, exceto para os elementos que são especificados como um argumento.
Exemplos:
/* This query selects All div elements except for */
div:not(.foo) {
background-color: red;
}
/* Selects all hovered nav elements inside section element except
for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
background-color: red;
}
/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) {
color: red;
}
<div>test</div>
<div class="foo">test</div>
<br>
<section>
<nav id="foo">test</nav>
<nav>Hover me!!!</nav>
</section>
<nav></nav>
<br>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
color: red;
}
/* This selector is lower in the cascade but is overruled by the style above */
#foo {
color: green;
}
<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
Como outros disseram, você simplesmente colocou: não(.classe). Para selectores CSS, eu recomendo visitar este link, tem sido muito útil ao longo da minha viagem: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
-
X: não (selector)
- div: não (#contentor) {
- Cor: Azul;
- }
Ou, se eu quisesse seleccionar todos os elementos (não aconselhados) excepto as marcas do parágrafo, poderíamos fazer:
1. *:not(p) {
2. color: green;
3. }