Como atribuir várias classes a um contêiner HTML? [fechadas]

398

É possível atribuir várias classes a um único HTMLcontêiner?

Algo como:

<article class="column, wrapper"> 
ARGO
fonte
Que problema você tem agora? Qualquer forma que fosse a solução para este problema. Qualquer outro problema pode depender de vários fatores.
Aurelio De Rosa
11
Embora isso seja possível, geralmente uso contêineres aninhados com herança CSS. É muito mais bonito e geralmente mais útil.
Jonathan Henson
Se você ainda estiver tendo um problema após a remoção da vírgula, sugiro consultar as orientações sobre por que as regras não funcionam . Eu descobri que a velocidade mais comum para mim é a situação descrita lá como "Uso de uma popperty de taquigrafia" (ou seja, revertendo implicitamente para um valor padrão)
LJ in NJ

Respostas:

531

Apenas remova a vírgula assim:

<article class="column wrapper"> 
Aurelio De Rosa
fonte
3
<article class = "class1 class2 ... classN">
Andre Elrico 19/01
11
Estranho seu espaço em vez de vírgulas. Mas sim Obrigado pela resposta
Soham Mehta
188

Do padrão

7.5.2 Identificadores de elementos: os atributos id e class

Definições de atributo

id = nome [CS]
Este atributo atribui um nome a um elemento. Este nome deve ser exclusivo em um documento.

class = cdata-list [CS]
Este atributo atribui um nome de classe ou conjunto de nomes de classe a um elemento. Qualquer número de elementos pode receber o mesmo nome ou classe de classe. Vários nomes de classe devem ser separados por caracteres de espaço em branco.

Sim, basta colocar um espaço entre eles.

<article class="column wrapper">

Obviamente, há muitas coisas que você pode fazer com a herança CSS. Aqui está um artigo para leitura adicional .

Jonathan Henson
fonte
3
Como se espera que um navegador reaja se um elemento for atribuído a várias classes que definem valores diferentes para os mesmos atributos. Existe alguma ordem de precedência para isso?
EternallyCurious
6
@ JonathanHenson: não, não é. Em caso de especificidade vinculada, a regra que ocorre posteriormente no CSS vence.
Ulrich Schwarz
11
@UlrichSchwarz, a classe CSS listada mais tarde (o que eu esperava quando testei isso) ou mais tarde em todos os arquivos CSS? Porque o primeiro certamente não funciona nos navegadores em que testei, enquanto testei a última hipótese.
27616 Jonathan Henson
9
@ JonathanHenson: De acordo com as especificações do CSS 2.1 , "se duas declarações têm o mesmo peso, origem e especificidade, a última especificada vence. As declarações nas folhas de estilo importadas são consideradas antes de qualquer declaração na própria folha de estilo". Portanto, é a ordem da declaração CSS. Os nomes no atributo de classe não têm ordem especificada, pois .fooé um açúcar sintático para [class ~= foo] ref ", fooé uma palavra no classatributo".
Ulrich Schwarz
11
@UlrichSchwarz Obrigado pelo esclarecimento.
Jonathan Henson
18

Para atribuir várias classes a um elemento html , inclua os dois nomes de classe nas cotações do atributo de classe e deixe-os separados por um espaço:

<article class="column wrapper"> 

No exemplo acima, columne wrappersão duas classes css separadas, e as duas propriedades serão aplicadas ao articleelemento.

Webeng
fonte
16
o que tem essa resposta diferente da anterior?
Iván Rodríguez Torres
-2

você precisa colocar um ponto entre a classe como

class = "column.wrapper">

amit kumar
fonte