CODEWITHSUNDEEP
htmlcsscss-selectors
iamabin
iamabin

Reputation: 5

CSS :hover on child selector

I have this HTML:

<div class="container-s">
    <div class="service">
        <div class="animate-this">

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

The animate-this class could appear different times throughout the html. so, this is what I've come up with

.container-s .service:hover .container-s .animate-this {

}

But this won't work

Can anyone please suggest an alternative way alongside the child selectors?

Upvotes: 0

Views: 1498

Answers (1)

BoltClock
BoltClock

Reputation: 724542

In this specific case, because both elements are part of the same container you do not need to specify the same container more than once:

.container-s .service:hover .animate-this

This finds .animate-this within .service on hover, itself within .container-s. By having the additional .container-s there you are saying that .animate-this appears within some inner container, which is incorrect. This is not to be confused with grouping several distinct selectors using a comma, in which case you will need to repeat the container portion for each selector. In this case, you're only dealing with one selector.

If .animate-this can appear in a different container than .service, then this would only be possible in CSS if you could actually express this relationship using a selector. Unfortunately CSS selectors are very limited in their scope, in particular there is no way to ascend from a container in order to traverse to a completely different element.

Your real objective is to animate this element when .service is hovered regardless of where it appears in the HTML. This would require using JavaScript to find each element separately, as CSS selectors operate based on concrete relationships between elements.

Upvotes: 1

Related Questions