Where I can use + and > in CSS?

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>

Answer 2

The selectors are extensively explained in the W3 CSS spec, but here is a digest:

Immediate child selector

The > selector is the immediate child selector. In your example li > a, the rule would select any <a> element that is an immediate child of an <li> element.

The rule would select the anchor in this example:

<ul>
   <li><a href="#">An anchor</a></li>
</ul>

The adjacent sibling selector

The + selector is the adjacent sibling selector. In your example div + span, the rule would select any <span> elements that is immediately preceded by a <div> element, and where they both share the same parent.

The span element would be selected in this case:

<article>
   <div>A preceding div element</div>
   <span>This span would be selected</span>
</article>

Answer 3

The > is the direct child selector. In your example of li > a, this will only select <a> tags that are direct descendants of the <li>.

The + means siblings of the selected elements. In your example, div + span would select any <span>s next to a <div> (with the same parent).