CODEWITHSUNDEEP
javascripthtmlcssangularjs
jeefo
jeefo

Reputation: 164

How to select current element to apply hover effect? not inherited

I want to select exact element to apply hover effect. But not inherited.

<div class="parent">
    <div class="child"> <-- not here
        <div class="parent">
            <div class="child"></div> <-- apply hover effect
        </div>
    </div>
</div>

is it possible by only CSS ? If it is not possible by only CSS, you can give me idea angularjs directive. Goal is I want to make a reuseable, scaleable angularjs directive or CSS class.

Thank you.

EDIT More clear structure.

<div class="custom-scroller">
    <div class="custom-scrollbar"> <-- not here
        <dynamic-multi-layer-elements>
            ... <-- lots of dynamic number of elements here
            <div class="custom-scroller"> <-- it might be many times nested
                <div class="custom-scrollbar"></div> <-- apply hover effect
            </div>
            ... <-- lots of elements closed
        </dynamic-multi-layer-elements>
    </div>
</div>

Upvotes: 3

Views: 387

Answers (2)

Jay
Jay

Reputation: 151

.parent .parent > .child:hover
{
color:green;
}

you can do it like that

Upvotes: 0

Naqash Malik
Naqash Malik

Reputation: 1816

You can do it like this:

.parent > .child > .parent > .child:hover
{
    color: red;
}

Upvotes: 4

Related Questions