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">

html class

— 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

531

Apenas remova a vírgula assim:

<article class="column wrapper">

— Aurelio De Rosa
fonte

3

— 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