How to change css of first child based on second child?

user_16900784 0
Viewed 88

I have a div which has 2 children

<div class="parent">
    <div class="child1"> XYZ </div>
    <span class="child2">67</span>
</div>

if the child2 has text in it, I want child1 to be of 10px width but if child2 is an empty span, I want child1 to take 100% width. I tried using only-child but it is not working as anyway span is a child whether its empty or not.

css javascript
1 Answers

use this

div.parent .child2 ~ .child1{width:10px};
div.parent .child2:empty ~ .child1{width:100%};
user_24294340
Related