CSS - on hover, highlight element (as well as inner element)

Question

I'm using font-icons, and I am trying to get the icon as well as the <a> tags around it to change color when hovered over.

<div class="container">
    <ul>
        <li>
            <a href="#">
                <i class="fa fa-user-circle fa-lg"></i>
            </a>
        </li>
    </ul> 
</div>

And the CSS:

.container {
    background-color: blue;
    width: 100%;
    position: fixed;
    top: 0;
}

.container a {
    padding: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color cubic-bezier(.170, .70, .49, 1) .5s,
    color cubic-bezier(.170, .70, .49, 1) .3s;
}

So when the <a> tags are hovered over, I want the <a> tag as well as the inner <i> tags to change color, with the <a> getting its background-color changed, and <i> having its color changed. I've tried the following:

.container a:hover {
    background-color: purple;
    color: red;
}

This will get the background-color to change to purple on hover, but the <i> tags inside the <a> tags will not change to red.

Answer 1

That's because you're not selecting the <i>.

.container a:hover {
    background-color: purple;
    color: red;
}

.container a:hover > i {
    color: red;
}

You'll have to select the <i> inside the <a>