0

Realizando una pagia web me encuentro con la siguiente duda al momento de darle estilos en el documento de CSS, aqui un peqeño fragmento de un div que he hecho:

 <div class="row" data-toggle="modal" data-target="#modalAddDir" data-backdrop="static" (click)="addDir()" id="new_dir">
      <div class="col" id="cir_mas">
        <div id="mas">+</div>
      </div>
      <div class="col" id="con_nu_dir" >
        <div id="nueva_dir">
          Añadir una nueva dirección
        </div>
      </div>
    </div>

Como pueden ver tengo un div con class & id.

sin embargo me solitan que solo trabaje con clases al momento de darle estilos en CSS es decir que los ids que he colocado no los tome en cuenta. Como deberia escribir las clases cuando tengo clases por defecto como "row" y "col" las cuales a veces se encuentran anidadas y otras veces no, como es el caso de la clase "col" en mi ejemplo.

Como puedo darles estilos diferentes cuando las clases se repiten en diferentes divs y necesitan estilos específicos sin utilizar IDs.

Saludos.

1
  • 1
    simplemente creas otra clase mas dentro de la etiqueta <div class="col color-fondo"></div> , en este caso col da las dimensiones y la clase color-fondo hace lo que describe, dar color al fondo , así se manejan las clases Commented el 28 jun. 2018 a las 15:23

4 respuestas 4

2

No importa que todas tengan la misma clase, puedes diferenciar una de otra agregando una clase diferente sin perjudicar las otras. Te dejo un ejemplo

.col{
  min-height: 100px;
  min-width: 50%;
  background-color: blue;
  margin: 3%;
}

.myCol{
  background-color: green;
}

.yourCol{
  background-color: yellow;
}

div[class="col theirCol"]{
background-color: brown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col"></div>
<div class="col yourCol"></div>
<div class="col"></div>
<div class="col myCol"></div>
<div class="col theirCol"></div>

También si te sirve puedes jugar con los selectores, observa el DIV café. Recuerda que en CSS el orden importa más que otra cosa.

1
  • gracias me ayudo mucho tu ejemplo para entender :) Commented el 28 jun. 2018 a las 15:42
2

Solo tendrias que ser mas especifico en la herarquia de los elementos en el selector para poder aplicar estilos diferentes a clases iguales:

.btn{
 background:#ccc;
 border:solid 1px #ccc;
 border-radius:4px;
}

.div-1 .btn{
 color:red;
}

.div-1 .div-2 .btn{
 color:blue;
}
<div class="div-1">
   <div class="div-2">
     <button class="btn">Button rojo</button>
   </div>
   <button class="btn">Button azul</button>
</div>

.div-1 .btn indica que se aplique el estilo al elemento con la clase .btn que se encuentra dentro de un elemento con la clase .div-1.

Mientras que la segunda regla div-1 .div-2 .btn indica que se aplique estilo al la clase .btn que se encuentra dentro de una clase .div-2 que tienen como padre una clase .div-1.

1

Añade una segunda clase al tag:

<div class="row row-1" data-toggle="modal" data-target="#modalAddDir" data-backdrop="static" (click)="addDir()" id="new_dir">
      <div class="col col-1" id="cir_mas">
        <div id="mas">+</div>
      </div>
      <div class="col col-2" id="con_nu_dir" >
        <div id="nueva_dir">
          Añadir una nueva dirección
        </div>
      </div>
    </div>
1

Por añadir otra opción, podrías incluso usar propiedades como filtrar al n-ésimo hijo donde n es par(even) o impar (odd)

.row .col:nth-child(even) {background: #CCC;}
.row .col:nth-child(odd) {background: #FFF;}
<div class="row" data-toggle="modal" data-target="#modalAddDir" data-backdrop="static" (click)="addDir()" id="new_dir">
  <div class="col" id="cir_mas">
    <div id="mas">+</div>
  </div>
  <div class="col" id="con_nu_dir" >
    <div id="nueva_dir">
      Añadir una nueva dirección
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.