Elementos de destino com várias classes, dentro de uma regra

117

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);
}
Tanner Ottinger
fonte

Respostas:

182

.border-blue.background { ... }é para um item com várias classes.
.border-blue, .background { ... }é para vários itens, cada um com sua própria classe.
.border-blue .background { ... }é para um item em que '.background' é filho de '.border-blue'.

Veja a resposta de Chris para uma explicação mais completa.

Vian Esterhuizen
fonte
2
Obrigado! Eu não sabia se isso era possível, então estava perguntando aqui para descobrir.
Tanner Ottinger
Esta solução não funciona para mim (ou não funciona mais ...).
fresko
você precisa separar as classes por vírgulas, como diz a resposta do Chris
fresko
o que você quer dizer com .border-blue .background { ... }é criança? Eu tentei isso e não funcionou
Eliav Louski
174

Caso alguém tropece nisso como eu e não percebo, as duas variações acima são para casos de uso diferentes.

Os seguintes:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

é para quando você deseja adicionar estilos a elementos que possuem a classe de borda azul ou de fundo, por exemplo:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

todos teriam uma borda azul e um fundo branco aplicados a eles.

No entanto, a resposta aceita é diferente.

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

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):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

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 .

Chris Graham
fonte
12
Essa foi uma resposta muito útil que quase não li. Felicidades!
psicopoo
1
Apenas tenha cuidado. Não há vagas em.blue-border.background
Knu8
2
think of it as AND and OR: Ótimo conselho. Devo acrescentar que .x .ypode ser pensado comoy && ancestors.has(x)
Siddharth Garg