difference in css styling between <ul> > <li> and <ul> <li>

Question

What is the difference in css styling between divClass > ul > li > a and divClass ul li a basically I am trying to style an anchor tag which is in li and li belongs to ul of course and ul is inside a div and div class name is classDiv, I have done some basic research and I have tried in both ways but not working yet, here is html

<div class="classDiv">            
        <ul>                
            <li class="abc">google.com</li>                
        </ul>                            
    </div>

and css

.classDiv > ul > li > a:hover{    
color: green;
background-color: skyblue;
cursor: pointer;    
}

Answer 1

" > " is the child selector

" " is the descendant selector

The difference is that a descendant can be a child of the element, or a child of a child of the element or a child of a child of a child ad inifinitum.

A child element is simply one that is directly contained within the parent element:

<foo> <!-- parent -->
  <bar> <!-- child of foo, descendant of foo -->
    <baz> <!-- descendant of foo -->
    </baz>
  </bar>
</foo>

for this example, foo * would match <bar> and <baz> , whereas foo > * would only match <bar> . Source

Answer 2

Use this

  .classDiv > ul > li > a:hover { color: green; background-color: skyblue; cursor: pointer; } 

 <div class="classDiv"> <ul> <li> <a href="www.google.com">Google.com</a> </li> </ul> </div> 

Answer 3

/*you can try this is also working */
        <div class="classDiv">            
                <ul>                
                    <li class="abc"><a href="#">google.com</a></li>                
                </ul>                            
            </div>

    .classDiv li a{    
    color: white;
    background-color: skyblue;
    cursor: pointer;    
    }

    .classDiv li a:hover{    
    color: green;
    background-color: skyblue;
    cursor: pointer;    
    }