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);
}

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.


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 .


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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.