What is the benefit of using the '>' selector in CSS?

Question

These two Selectors:

.class>li>a{}

and

.class li a{}

are doing exactly same job for me so can some one please tell me what is the benefit of using > ?

Thanks

Answer 1

It makes the selector more specific.

The first selector only targets an anchor tag that is a child tag of a lst item that is a child tag of a CLASS.

<div class="fo">
<li>
<a>

the second select will target all anchor tags that are a descendant of a list item which is a descendant of a specific class.

<div class="fo">
.....
<li>
.....
<a>

where .... can be any other dom element

Answer 2

With the selector > you focus on the immediate chidlrens

<div class="class">
  <ul>
     <li><a href="#">text</a></li>
  </ul>
</div>

With this part of code, the selector .class>li>a{} won't work cause the child of .class is "ul". But .class li a{} will work cause it check all in the selector tree.

  <ul class="class">
     <li><a href="#">text</a></li>
  </ul>

Will work with your .class>li>a{} cause they are all immediate children.

Another exemple, if you have this html code

<div id="section">
  <span>some text</span>
  <div class="subSection">
    <span>some text</span>
  </div>
</div>

The selector #section>span will apply to the first span only. The selector #section span will apply to all spans in the id section.