How to make css transition effect apply to all its children?

Question

What im trying to do is make a global class

.animate {
    -webkit-transition:0.2s;
    -moz-transition:0.2s;
    -o-transition:0.2s;
    transition:0.2s;
}

and apply it as

<div class="element animate">
<div class="child"></div>
</div>

however, whenever I try

.element:hover .child{
    background:#000;
}

it doesnt apply the transition. Is there any way to do this? or do I just have to apply .animate to every child element?

Also, about what Im trying to do, is it practical?

Thanks!

Answer 1

Instead of applying it to every child, just use the direct child selector (>):

.animate > * {

An advantage of this is that you don't have to apply the child class to every single child. (You could also keep the child class, and do .child {, but that's exactly what you were trying to avoid.)

Or if you want to animate every child, regardless of its depth (i.e. <div class='animate'><div><div>This one</div></div></div>), do:

.animate * {