If element has a child of type image - apply certain styles?

Question

Here's my HTML:

<li>
    <div class="img-drop-zone">
       <img src="myimage.jpg">
       <div class="desc">drop img here</div>
    </div>
</li>

Sometime img-drop-zone has no image in it.

Is there a way to target this in sass, so that when img-drop-zone has a child which is an image, set .desc to display:none

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — cimmanon, Mar 06 '14 at 15:04

Martin Turjak · Accepted Answer · 2014-03-06T15:36:35.867

You can not really do this in CSS (and as you know Sass gets compiled to CSS before it is applied, so same limitations there), because you can not add anything to parents based on their children (hence bubble up stuff to img-drop-zone form img). However, you can use the adjacent selector or really any sibling combinators to apply stuff to elements if they follow img.

Something like this perhaps:

.img-drop-zone img + .desc {
  display:none;
}

DEMO

But since you are obviously implementing some additional functionality (deducted from the "drop image here" message), and you will probably use some kind of javascript to do that, then I would say javascript would offer some additional options concerning your desired DOM operations (removing the message, adding a class, or something else that would happen after you add the image and would let you control the styling).

If element has a child of type image - apply certain styles?

1 Answers1