Question

This may be a basic question but to me it is still confusing where I can use + or > in CSS.

I see many selectors like li > a or div + span etc. but I am not sure what the difference is and when to use them?

Answer 1

The > sign means select a direct descendant

Example:

CSS

div > ul {
   list-style: none;
}

HTML
Here the style would apply to the <ul>

<div>
  <ul>
  </ul>
</div>

The + sign means select an adjacent sibling

Example:

CSS

p + p
{
   font-weight: bold;
} 

HTML
Here the style would apply to the latter <p>

<div>
   <p></p>
   <p></p>
</div>