CODEWITHSUNDEEP
css
BlackjacketMack
BlackjacketMack

Reputation: 5692

Using CSS, how can I get the pseudo-class 'empty' on Element B to affect the styling of Element A?

I have two very simple text fields, and I want to style the first element based on the 'empty' pseudo-class of the second. How might I go about doing this?

<style type='text/css'>
#element-b:empty [MAKE ELEMENT-A BOLD]{

}
</style>   

<div id="element-a">Some Element</div>
<div id="element-b">Some Other Element</div>

Upvotes: 1

Views: 133

Answers (2)

Joeytje50
Joeytje50

Reputation: 19112

Just use the adjacent sibling selector +

#element-a:empty + #element-b {font-weight:bold;}

The + selector will select the element that is placed right after the selected element.

Update after question was updated: It is impossible to select the previous element. With CSS, you can only select the next element, via the + sibling selector, but selecting the previous one is impossible.

Upvotes: 1

clov3rly
clov3rly

Reputation: 70

You can do this in CSS if you reverse the position of the elements in the code, like so:

<style type='text/css'>
#element-b:empty + #element-a {

}
</style>   

<div id="element-b">Some Other Element</div>
<div id="element-a">Some Element</div>

Now obviously your elements are out of position, but you can rearrange them fairly simply with some CSS positioning.

Fiddle here. Delete the text from the element B to see element A bolded.

Upvotes: 0

Related Questions