¿Qué estoy haciendo mal aquí?
Tengo un div
.social
, pero en el primero quiero relleno cero en la parte superior, y en el segundo no quiero borde inferior.
Intenté crear clases para este primero y el último, pero creo que lo he hecho mal en alguna parte:
.social { width: 330px; height: 75px; float: right; text-align: left; padding: 10px 0; border-bottom: dotted 1px #6d6d6d; } .social .first{padding-top:0;} .social .last{border:0;}
Y el HTML
¿Supongo que no es posible tener dos clases diferentes? Si es así, ¿cómo puedo hacer esto?
Si quieres dos clases en un elemento, hazlo de esta manera:
Refiéralo en CSS así:
.social.first {}
Ejemplo:
Puedes intentar esto:
HTML
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:
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; }