paginas - Usando dos clases de CSS en un elemento

etiquetas css pdf

Question

¿Qué estoy haciendo mal aquí?

Tengo un div .social , pero en el primero quiero cero relleno en la parte superior y en el segundo no quiero ningún borde inferior.

He intentado crear clases para este primero y último pero creo que me equivoqué 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

<div class="social" class="first">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

Supongo que no es posible tener dos clases diferentes? Si es así, ¿cómo puedo hacer esto?

Answer 1

Otra opción es utilizar selectores descendientes.

HTML:

<div class="social">
<p class="first">burrito</p>
<p class="last">chimichanga</p>
</div>

Referencia el 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/

Answer 2

Puedes ponerlo de otra manera, por ejemplo, puedes enfocar o cualquier otra cosa 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;
}

Answer 3

Puedes probar esto:

HTML

<div class="social">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

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:

<div class="class1 class2 class3"></div>

DEMO

Answer 4

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

<img class="class1 class2">

Answer 5

Sé que esta publicación está desactualizada, pero esto es lo que pidieron. 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 manera de usar selectores. Además, si necesita varias "primeras" extensiones, tendrá que 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 un pequeño fragmento de css que debe estar vinculado a muchos componentes diferentes, y no desea 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;}

Answer 6

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;
}

Luego, la regla .social tiene ambos estilos comunes y los estilos del último elemento.

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

También puede usar :last-child selector del :last-child , pero :first-child es más compatible con los navegadores antiguos: consulte https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility and https://developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility .

Answer 7

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

<div class="social first"></div>

Referenciarlo en css así:

.social.first {}

Ejemplo:

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

Answer 8

Si solo tienes dos elementos, puedes 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;
}

Answer 9

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

No tienes que tener un .indent.font{} en css.

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