Display div only if another element has a class

Question

I want to display the toggle_embed class only if the a element has has-embed class. Is there any way I can solve this using CSS?

<div class="comment HAS_EMBEDDED">
    <div class="toggle_embed">Embedded content</div>
    <a class="has-embed">@name</a>
    <a>Text</a>
</div>

score 1 · Answer 1 · answered Sep 03 '15 at 09:46

NO. There's no previous selector in css. So, you can't do this just with css, you may use jQuery for this.

But if you want to use pure css solution then what about changing the markup like below?

<div class="comment HAS_EMBEDDED">
    <a class="has-embed">@name</a>
    <div class="toggle_embed">Embedded content</div>
    <a>Text</a>
</div>

Then you can use css like this:

.toggle_embed{
   display: none;
}
.has-embed + .toggle_embed{
    display: block;
}

Note: Changing the markup, you may have to re-work for your layout.

1 Answers1