What does "+" mean in css. Help me?

Question

What does the "+" symbol stand for in css style. What does the below code infer
#mainDiv label + a { }

have a look here: http://www.edition-w3.de/TR/1998/REC-CSS2-19980512/kap05.html — basilikum, Jun 17 '13 at 07:36
@basilikum: Not only is that a really old spec, but it's also in German. Unless you know the OP understands German, it's probably not a good idea to link to a non-English resource. — BoltClock, Jun 17 '13 at 07:44
@BoltClock oh boy, I think I'm not really awake yet. Here is a link to the english spec: http://www.w3.org/TR/CSS2/selector — basilikum, Jun 17 '13 at 07:50

score 2 · Answer 1 · answered Jun 17 '13 at 07:35

2

It targets an a that follows a label nested within #mainDiv.

<div id="mainDiv">
    <label></label>
    <a>This element.</a>
</div>

answered Jun 17 '13 at 07:35

Marty

39,033
19
93
162

Starx · Accepted Answer · 2013-06-17T10:32:17.400

0

+ means adjacent selector.

In your case it means if <a> tag is found directly after <label> tag inside the mainDiv then apply the css.

Example:

<div id="mainDiv">
    <label>Label Text</label>
    <a>Link</a> <!-- Your CSS will apply to this -->
</div>

edited Jun 17 '13 at 10:32

answered Jun 17 '13 at 07:34

Starx

77,474
47
185
261

score 0 · Answer 3 · answered Jun 17 '13 at 07:34

It is Adjacent sibling combinator.

The adjacent sibling combinator is made of the "plus sign" (U+002B, +) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence immediately precedes the element represented by the second one.

What does "+" mean in css. Help me?

3 Answers3