How can I select a div if another div exists in DOM

Question

I have this sample:

CODE HTML:

<div class="product-info-main">
  <div class="product-add-form">
    <div class="qty">

    </div>
  </div>
</div>

<div class="product-social-links">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

CODE CSS:

.qty + .product-social-links{
      background: red;
}

why does not this CSS code go? I really want to apply the style only if the .qty div exists.

How can I do this without javascript, just from CSS?

Thanks in advance!

`product-social-links` is not a sibling of `qty`. You will not be able to do this with CSS — sol, Dec 05 '17 at 10:11
CSS can't go from children to parents, impossible to do something like `.qty < parent + sibling {styles}`. Only way when this code is generated is to add class `.has-qty` to `.product-info-main`, than `.has-qty + .product-social-links` will work. Other way is to use JS. — pavel, Dec 05 '17 at 10:13
You cant as described here: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Salman A, Dec 05 '17 at 10:21
or wait for CSS 4 and you will you will have parent selector :) — Temani Afif, Dec 05 '17 at 11:17

score 1 · Accepted Answer · edited Dec 05 '17 at 10:19

1

The code you mentioned which is .qty + .product-social-links will not work because .qty does not have the same parent as .product-social-links. They should have the same parent for this to work. A better solution would be to set the parent which is the same level as .product-social-links.

See solution below:

.product-info-main + .product-social-links {
background: red;
}

edited Dec 05 '17 at 10:19

Hash

6,667
7
31
50

answered Dec 05 '17 at 10:15

Oliver Ong

97
8

How can I select a div if another div exists in DOM

1 Answers1