CODEWITHSUNDEEP
htmlcsscss-selectors
cedivad
cedivad

Reputation: 2644

CSS selector outside the parent container

I would like to apply some CSS to an element in another class when an element with an ID is on mousehover. I don't want to use JS.

Example:

<div class="parent">
    <div id="parent_1">parent_1</div>
    <div id="parent_2">parent_2</div>
    <div id="parent_3">parent_3</div>
</div>

<div class="another_parent">
    <div id="another_parent_1">another_parent_1</div>
    <div id="another_parent_2">another_parent_2</div>
    <div id="another_parent_3">another_parent_3</div>
</div>

<style>#parent_3:hover #another_parent_3 {color: red;}</style>

JSFiddle: http://jsfiddle.net/CvT6U/

Upvotes: 1

Views: 7114

Answers (2)

morocklo
morocklo

Reputation: 2680

Can you not use a general sibling selector?

#parent_3:hover ~ #another_parent_3 {color: red;}

http://learn.shayhowe.com/advanced-html-css/complex-selectors/#sibling-selectors

Upvotes: -1

cedivad
cedivad

Reputation: 2644

It's impossible. As per CSS3 specs:

http://www.w3.org/TR/css3-selectors/#selectors

E F an F element descendant of an E element 
E > F   an F element child of an E element  
E + F   an F element immediately preceded by an E element
E ~ F   an F element preceded by an E element

Upvotes: 4

Related Questions