Usar dos clases de CSS en un elemento

Si quieres dos clases en un elemento, hazlo de esta manera:

Refiéralo en CSS así:

 .social.first {} 

Ejemplo:

https://jsfiddle.net/tybro0103/covbtpaq/

Puedes intentar esto:

HTML

 
 
 
Find me on Facebook
  

CÓDIGO CSS

 .social { width:330px; height:75px; float:right; text-align:left; padding:10px 0; border-bottom:dotted 1px #6d6d6d; } .social .socialIcon{ padding-top:0; } .social .socialText{ border:0; } 

Para agregar varias clases en el mismo elemento, puede usar el siguiente formato:

MANIFESTACIÓN

Si solo tiene dos elementos, puede hacer esto:

 .social { width: 330px; height: 75px; float: right; text-align: left; padding: 10px 0; border: none; } .social:first-child { padding-top:0; border-bottom: dotted 1px #6d6d6d; } 

Si desea aplicar estilos solo a un elemento que es el primer hijo de sus padres, ¿es mejor usar :first-child

 .social:first-child{ border-bottom: dotted 1px #6d6d6d; padding-top: 0; } .social{ border: 0; width: 330px; height: 75px; float: right; text-align: left; padding: 10px 0; } 

Entonces, la regla .social tiene estilos comunes y estilos del último elemento.

Y .social:first-child reemplaza con los estilos del primer elemento.

También podría usar :last-child selector de :last-child , pero :first-child es más compatible con navegadores antiguos: consulte https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility y https: //developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility .

Sé que esta publicación se está desactualizando, pero esto es lo que preguntaron. En tu hoja de estilo:

 .social { width: 330px; height: 75px; float: right; text-align: left; padding: 10px 0; border-bottom: dotted 1px #6d6d6d; } [class~="first"] { padding-top:0; } [class~="last"] { border:0; } 

Pero puede ser una mala forma de usar selectores. Además, si necesita una extensión múltiple “primera”, deberá asegurarse de establecer un nombre diferente o de refinar su selector.

 [class="social first"] {...} 

Espero que esto ayude a alguien, puede ser bastante útil en alguna situación.

Por ejemplo, si tiene una pequeña porción de css que tiene que estar vinculada a muchos componentes diferentes, y no quiere escribir cien veces el mismo código.

 div.myClass1 {font-weight:bold;} div.myClass2 {font-style:italic;} ... div.myClassN {text-shadow:silver 1px 1px 1px;} div.myClass1.red {color:red;} div.myClass2.red {color:red;} ... div.myClassN.red {color:red;} 

Se convierte en:

 div.myClass1 {font-weight:bold;} div.myClass2 {font-style:italic;} ... div.myClassN {text-shadow:silver 1px 1px 1px;} [class~=red] {color:red;} 

Recuerde que puede aplicar múltiples clases a un elemento separando cada clase con un espacio dentro de su atributo de clase. Por ejemplo:

Otra opción es usar selectores descendentes

HTML:

 
 
burrito
 
chimichanga
  

Referencia primero en CSS: .social .first { color: blue; } .social .first { color: blue; }

Referencia última en CSS: .social .last { color: green; } .social .last { color: green; }

Jsfiddle: https://jsfiddle.net/covbtpaq/153/

Si tiene 2 clases, es decir .indent y .font , class="indent font" funciona.

No es necesario tener un .indent.font{} en css.

Puede hacer que las clases se separen en css y aún llamar a ambas simplemente usando class="class1 class2" en el html. Solo necesitas un espacio entre uno o más nombres de clase.

Puedes ponerlo de otra manera, por ejemplo, puedes poner como enfoques o cualquier otra cosa, esto es lo que hice con enfoque …

 input[type="text"] { border: 1px solid grey; width: 40%; height: 30px; border-radius: 0; } input[type="text"]:focus { border: 1px solid 5acdff; }