Tengo varios <div> que envuelven a algunos niños que tienen una class . Pero el problema es que el padre <div> no tiene una class o una id . ¿Es posible agregar un margin-bottom entre los divs principales envolventes que tienen un elemento secundario específico con solo CSS puro o necesito usar jQuery o JS para lograr esto?
Ejemplo de cómo podría verse el HTML :
// parent <div> // children <h2 class="child-class-1" ></h2> <p class="child-class-2" ></p> </div> // margin-bottom between the wrapping parent divs <div> <h2 class="child-class-1" ></h2> <p class="child-class-2" ></p> </div>Encontré una solución con CSS puro.
Solución aquí:
div > .child-class-1, .child-class-2 { margin-bottom: 80px; } <div style="background-color:red; height: 400px; width:400px;"> <h2 class="child-class-1" ></h2> <p class="child-class-2" ></p> </div> <div style="background-color:red; height: 400px; width:400px;"> <h2 class="child-class-1" ></h2> <p class="child-class-2" ></p> </div> <div style="background-color:red; height: 400px; width:400px;"> <h2></h2> <p>Dosent affect the div which dosen't have the child class</p> </div>Tal vez pueda agregar propiedades para la etiqueta <div> en su HTML con estilo externo/interno, pero afecta a todas las etiquetas en sus páginas html actuales/todas
ejemplo para su código css:
div { margin-bottom: 12px } o tal vez puede agregar un estilo personalizado para solo un <div> solo con estilo en línea, puede usar:
<div style="margin-bottom:12px"> <h2 class="child-class-1" ></h2> <p class="child-class-2" ></p> </div> pero es bastante molesto, ya que tienes otro <div> en tu HTML