Where I can use + and > in CSS?

css, css-selectors

Solution

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>

Problem

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?

Original source