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

Question

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>

.custom-scroller .custom-scrollbar .custom-scroller > custom-scrollbar:hover { color:#000; } — Jay
– Jay, Commented May 9, 2016 at 5:51
I don't know how many times it is gonna be nested. It is nested itself. — jeefo
– jeefo, Commented May 9, 2016 at 5:59
How many .custom-scrollbars exist after adding dynamic content? Only two? — Jose Quintero
– Jose Quintero, Commented May 9, 2016 at 6:29

Naqash Malik · Accepted Answer · 2016-05-09 05:34:45Z

4

You can do it like this:

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

answered May 9, 2016 at 5:34

Naqash Malik

1,8261 gold badge13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jay · Accepted Answer · 2016-05-09 05:42:57Z

0

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

you can do it like that

answered May 9, 2016 at 5:42

Jay

1611 silver badge13 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related