Explain pls: what the 'a' implies here after 'li'? what does the 'li a: hover' mean here?

Question

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color:#111111;
}
</style>

Answer 1

'a' means the "anchor" tag in the html part, which looks like this... "<a href="#">some text</a>"

"li a:hover", means whenever you 'hover' (move onto) your cursor on the link (i.e., 'anchor' tag) which is present inside the 'list' (i.e., li), the background color of that part will change to the "#111111".

Answer 2

It's taking the li tag as the parent, and then the a is it's child because the 'a' tag would have to be in the li tag, and the :hover means when you hover your mouse over it.

The html woudl be like:

<ul>
<li><a href="blah blah">Something</a></li>
</ul>

As you can see, the 'a' is inside of the li, while the li is in the ul. The ul is the parent for li, and li is the parent for the 'a'.

I hope I explained that well