Eu tenho algum HTML que teria elementos com várias classes e preciso atribuí-los dentro de uma regra, de modo que as mesmas classes possam ser diferentes em contêineres diferentes. Digamos que tenho isso no meu CSS:
.border-blue {
border: 1px solid blue;
}
.background {
background: url(bg.gif);
}
Então eu tenho isso no meu HTML:
<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>
Posso direcioná-los em uma única regra? Assim, por exemplo, que sei que não funciona:
.border-blue, .background {
border: 1px solid blue;
background: url(bg.gif);
}
.border-blue .background { ... }
é criança? Eu tentei isso e não funcionouCaso alguém tropece nisso como eu e não percebo, as duas variações acima são para casos de uso diferentes.
Os seguintes:
é para quando você deseja adicionar estilos a elementos que possuem a classe de borda azul ou de fundo, por exemplo:
todos teriam uma borda azul e um fundo branco aplicados a eles.
No entanto, a resposta aceita é diferente.
Isso aplica os estilos a elementos que possuem ambas as classes, portanto, neste exemplo, apenas o
<div>
com ambas as classes deve ter os estilos aplicados (em navegadores que interpretam o CSS corretamente):Então, basicamente, pense assim: a separação por vírgula se aplica a elementos com uma classe OU outra classe e a separação por ponto se aplica a elementos com uma classe E outra classe .
fonte
.blue-border.background
think of it as AND and OR
: Ótimo conselho. Devo acrescentar que.x .y
pode ser pensado comoy && ancestors.has(x)