Alex Rivera | Logout

Where I can use + and > in CSS?

Asked 2012-04-14T17:27:50.930
19

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?

css css-selectors
Edit
Report

2 Answers

6

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>
answered 2012-04-14T17:31:18.893
0

li > a would only select a elements that are direct descendants of li elements. div + span would only select span elements that follow a div element.

Read more in @bažmegakapa's link: http://www.w3.org/TR/CSS2/selector.html#pattern-matching

answered 2012-04-14T17:30:42.460

Your Answer