¿Cómo asignar múltiples clases a un contenedor HTML? [cerrado]

398

¿Es posible asignar múltiples clases a un solo HTMLcontenedor?

Algo como:

<article class="column, wrapper">

html class

— ARGO
fuente

¿Qué problema tienes ahora? De cualquier manera, esa fue la solución a este problema. Cualquier otro problema puede depender de varios factores.

— Aurelio De Rosa

1

Aunque esto es factible, generalmente uso contenedores anidados con herencia CSS. Es mucho más bonito y, por lo general, más útil.

— Jonathan Henson el

Si todavía tiene un problema después de eliminar la coma, le sugiero que consulte la guía sobre por qué las reglas no funcionan . He encontrado que el aumento de velocidad más común para mí es la situación descrita allí como "Uso de una propiedad abreviada" (es decir, volviendo implícitamente a un valor predeterminado)

— LJ en NJ

531

Simplemente elimine la coma de esta manera:

<article class="column wrapper">

— Aurelio De Rosa
fuente

3

— Andre Elrico

1

Extraño su espacio en lugar de comas. Pero sí, gracias por la respuesta

— Soham Mehta

188

De la norma

7.5.2 Identificadores de elementos: los atributos id y class

Definiciones de atributos

id = nombre [CS]
Este atributo asigna un nombre a un elemento. Este nombre debe ser único en un documento.

class = cdata-list [CS]
Este atributo asigna un nombre de clase o un conjunto de nombres de clase a un elemento. A cualquier número de elementos se le puede asignar el mismo nombre o nombres de clase. Los nombres de varias clases deben estar separados por espacios en blanco.

Sí, solo pon un espacio entre ellos.

<article class="column wrapper">

Por supuesto, hay muchas cosas que puede hacer con la herencia CSS. Aquí hay un artículo para leer más .

— Jonathan Henson
fuente

3

¿Cómo debería esperarse que reaccione un navegador si se asigna un elemento a múltiples clases que establecen valores diferentes para los mismos atributos? ¿Hay algún orden de precedencia para eso?

— EternallyCurious

66

@ JonathanHenson: no, no lo es. En caso de especificidad vinculada, gana la regla que se produce más adelante en el CSS.

— Ulrich Schwarz

1

@UlrichSchwarz, la clase CSS listada más tarde (lo que esperaba cuando probé esto), o más tarde en todos los archivos CSS. Porque el primero ciertamente no funciona en los navegadores en los que probé, mientras que he probado la última hipótesis.

— Jonathan Henson el

99

@JonathanHenson: De acuerdo con las especificaciones de CSS 2.1 , "si dos declaraciones tienen el mismo peso, origen y especificidad, gana la última especificada. Las declaraciones en las hojas de estilo importadas se consideran antes de cualquier declaración en la hoja de estilo". Entonces es el orden de declaración CSS. Los nombres en el atributo de clase no tienen un orden específico, ya que .fooes azúcar sintáctico para [class ~= foo] ref , " fooes una palabra en el classatributo".

— Ulrich Schwarz

1

@UlrichSchwarz Gracias por la aclaración.

— Jonathan Henson el

18

Para asignar varias clases a un elemento html , incluya ambos nombres de clase dentro de las citas del atributo de clase y haga que se separen por un espacio:

<article class="column wrapper">

En el ejemplo anterior, columny wrapperson dos clases css separadas, y sus dos propiedades se aplicarán al articleelemento.

— Webeng
fuente

16

¿Qué tiene esta respuesta diferente de la anterior?

— Iván Rodríguez Torres

-2

necesitas poner un punto entre la clase como

class = "column.wrapper">

— amit kumar
fuente