Cómo aplicar dos clases de CSS a un único div/span

Question

¿Puedo aplicar 2 clases a un único div o span o cualquier elemento html? Por ejemplo:

<a class="c1" class="c2">aa</a> 

Lo intenté y, en mi caso, c2 no se aplicó. ¿Cómo puedo aplicar ambas clases a la vez?

Answer 1

1) el uso de múltiples clases dentro del atributo de clase, separadas por espacios en blanco (ref):

<a class="c1 c2">aa</a> 

2) Para orientar elementos que contienen todas las clases especificadas, utilice este selector CSS (ningún espacio) (ref):

.c1.c2 { 
} 

Answer 2

incluyen tanto cadenas de clase en un solo valor de atributo de clase, con un espacio en el medio.

<a class="c1 c2" > aa </a> 

Answer 3

Como han señalado otros, simplemente delimítelos con un espacio.

Sin embargo, saber cómo funcionan los selectores también es útil.

Considere este pedazo de HTML ...

<div class="a"></div> 
<div class="b"></div> 
<div class="a b"></div> 

Usando .a { ... } como un selector se seleccionará el primero y el tercero. Sin embargo, si desea seleccionar uno que tenga a y b, puede usar el selector .a.b { ... }. Tenga en cuenta que esto no funcionará en IE6, simplemente seleccionará .b (el último).

Answer 4

<a class="c1 c2">aa</a> 

Answer 5

Esto es muy claro que para agregar dos clases en div individual, primero debe generar las clases y luego combinarlas. Este proceso se usa para hacer cambios y reducir el no. de clases Quienes crean el sitio web desde cero utilizan principalmente este tipo de métodos. hacen dos clases de primera clase para color y segunda clase para ancho, alto, estilo de fuente, etc. Cuando combinamos las dos clases, la primera clase y la segunda clase tienen el efecto .

.color 
 
{background-color:#21B286;} 
 
.box 
 
{ 
 
    width:"100%"; 
 
    height:"100px"; 
 
    font-size: 16px; 
 
    text-align:center; 
 
    line-height:1.19em; 
 
} 
 
.box.color 
 
{ 
 
width:"100%"; 
 
height:"100px"; 
 
font-size:16px; 
 
color:#000000; 
 
text-align:center; 
 
}

<div class="box color">orderlist</div>

Answer 6

Separar 'em con un espacio.

<div class="c1 c2"></div> 

Answer 7

.color 
 
{background-color:#21B286;} 
 
.box 
 
{ 
 
    width:"100%"; 
 
    height:"100px"; 
 
    font-size: 16px; 
 
    text-align:center; 
 
    line-height:1.19em; 
 
} 
 
.box.color 
 
{ 
 
width:"100%"; 
 
height:"100px"; 
 
font-size:16px; 
 
color:#000000; 
 
text-align:center; 
 
}

<div class="box color">orderlist</div>

.color 
 
{background-color:#21B286;} 
 
.box 
 
{ 
 
    width:"100%"; 
 
    height:"100px"; 
 
    font-size: 16px; 
 
    text-align:center; 
 
    line-height:1.19em; 
 
} 
 
.box.color 
 
{ 
 
width:"100%"; 
 
height:"100px"; 
 
font-size:16px; 
 
color:#000000; 
 
text-align:center; 
 
}

<div class="box color">orderlist</div>

.color 
 
{background-color:#21B286;} 
 
.box 
 
{ 
 
    width:"100%"; 
 
    height:"100px"; 
 
    font-size: 16px; 
 
    text-align:center; 
 
    line-height:1.19em; 
 
} 
 
.box.color 
 
{ 
 
width:"100%"; 
 
height:"100px"; 
 
font-size:16px; 
 
color:#000000; 
 
text-align:center; 
 
}

<div class="box color">orderlist</div>