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:
- El
h3
debe ser el primer elemento.
- 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>
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..