7

Tengo el siguiente código:

<div class="togglearea">
  <div class="toggle">
    <h3>Titulo</h3>
  </div>
</div>
<div class="togglearea">
 <div class="toggle">Titulo 2</div>
</div>

He tratado (tanto como por css como por javascript) de manera fallida que si el .togglearea tiene un h3, aplicarle al .togglearea un margin-left de 30px. Pero solo consigo que se le aplique el cambio al h3 o a todos los .togglearea

2
  • 1
    ¿Cómo lo has intentado con JavaScript/jQuery? Debería ser algo realmente simple. Con CSS sin más no se puede hacer porque no hay (de momento) un selector para "padre"
    – Alvaro Montoro
    Commented el 12 ene. 2017 a las 20:47
  • 1. Obtener todos los toggleareas: var toggleareas = document.querySelectorAll('.togglearea'). 2. Iterar los toggleareas: [].forEach.call(toggleareas, function (area) { ... }). 3. Para cada togglearea ver si tiene un hijo (directo o no) h3, si es así, añadir margen izquierdo: if(area.querySelector('h3')) { area.style.marginLeft = '30px'; }. Por otro lado, me da bastante curiosidad quién le dió favorito..
    – gugadev
    Commented el 12 ene. 2017 a las 20:52

1 respuesta 1

6

Como te pongo en un comentario, sólo con CSS no se puede hacer porque (de momento) no hay un selector para ancestros o hermanos superiores. Con Javascript/jQuery sería realmente sencillo, podrías hacer algo como esto:

// selecciona todos los h3 que estén dentro de un togglearea
$(".togglearea h3").each(function() {
  // selecciona el .togglearea ancestro del h3 y pone el margen de 30
  $(this).closest(".togglearea").css("margin-left", "30px");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="togglearea"><div class="toggle"><h3>Titulo</h3></div></div>
<div class="togglearea"><div class="toggle">Titulo 2</div></div>


Aunque he dicho que no se puede hacer sólo con CSS, sí que hay una manera de hacerlo sin JS pero deben cumplirse ciertas restricciones:

  1. El h3 debe ser el primer elemento.
  2. Requiere que no haya nada más fuera del contenedor del h3

La idea sería poner un margen de 30px para TODOS los elementos que haya junto al h3 usando el selector de hermano ~. Sería algo como esto:

.togglearea h3,
.togglearea h3 ~ * {
  margin-left:30px;
}
<div class="togglearea"><div class="toggle"><h3>Titulo</h3></div></div>
<div class="togglearea"><div class="toggle">Titulo 2</div></div>

3
  • Coloque el CSS pero solo afecta al h3, no a .togglearea Y el jquery no afecta al .togglearea tampoco Commented el 12 ene. 2017 a las 21:19
  • @MarisabelGC ¿puedes compartir tu código para ver qué no funciona? En los ejemplos que pongo arriba funciona correctamente, ¿seguro que no faltó copiar nada?
    – Alvaro Montoro
    Commented el 12 ene. 2017 a las 21:24
  • Lo probe en un documento aparte y funciona perfecto. Gracias :D Commented el 12 ene. 2017 a las 21:55

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.