hover properties declaration confusion

Question

I am a confusion while reviewing hover properties.

.accordian ul:hover li {
    width: 50px;
}    
.accordian ul li:hover {
    width: 700px;
}

What are the difference between these 2 lines? Is it like first ul property is getting hovered for 50px and in the second line li elements are getting hovered? If that is the case then in the first line why li have been declared?

Answer 1

The first declaration says when any part of the ul is hovered, make all its descendant li have 50px width.

The second declaration says when any li that is a descendant of a ul is hovered, make it's width 700px.

For both the declarations, the condition is that the lists are descendants of .accordian. But I expect this to be irrelevant to the meaning of the question.

Hopefully, this helps you understand visually: http://jsfiddle.net/zey4aLr9/8/