I have the following code:
<div class="togglearea">
<div class="toggle">
<h3>Titulo</h3>
</div>
</div>
<div class="togglearea">
<div class="toggle">Titulo 2</div>
</div>
I have tried (both by css and by javascript ) unsuccessfully that if the .togglearea
has a h3
, apply to the .togglearea
un margin-left
of 30px
. But I only get the change to be applied to h3 or to all .togglearea
As I put in a comment, only with CSS it cannot be done because (at the moment) there is no selector for ancestors or superior siblings. With Javascript/jQuery it would be really easy, you could do something like this:
Although I have said that it cannot be done with CSS alone, there is a way to do it without JS but certain restrictions must be met:
h3
must be the first element.h3
The idea would be to put a 30px margin for ALL elements next to
h3
using the sibling selector~
. It would be something like this: