Difference between .class > .class and .class .class

Question

I just want to know the difference between:

.class .class{
font-size:14px;
}

VS:

.class > .class{
font-size:14px;
}

Is the same thing?

Answer 1

No, they aren't the same - the first example is a descendant selector, the second is a direct child selector.

---

.class .class will target all elements with the class .class which derive from any element which has the class .class, e.g

<div class="class">
 <div class="other">
    <div class="class"> This is targeted. </div>
 </div> 
</div>

jsFiddle example

---

.class > .class will only target direct children of elements with the class .class, e.g

<div class="class">
   <div class="other">
      <div class="class">This isn't targeted.</div>
   </div> 
   <div class="class">
      <div class="class">This is targeted, as it is a direct child.</div>
   </div>    
</div>

jsFiddle example.