When to use CSS + sign

Question

Very easy question. I have been using CSS for a while but rarely use + sigh for my code. Could any one explain what the best time is to use it? I couldn't find anything from Google...Thanks a millions...

Answer 1

I've found that adjacent sibling selectors are useful when you want to apply special styling to the first element of a series of elements. For example, if you want to style the first paragraph of an article differently from the rest, you could use:

p {
    /* styles for the first paragraph  */
}

p + p {
    /* styles for all other paragraphs */
}

This can replace using class="first" in many situations.

EDIT: Using the first-child pseudo-class would work better for this specific case, since it's supported by a wider range of browsers. (Thanks alex)

You might also want to adjust how certain elements are positioned when next to each other. If you have an unordered list that looks fine on its own, but needs less padding at the top when it's next to a paragraph, you could use:

ul {
    padding-top: 1em;
    /* Default ul styling */
}

p + ul {
    padding-top: 0;
    /* special styling for lists that come after paragraphs */
}

Answer 2

Use it whenever you want to target the next matching selector of a certain selector. E.g.

<p>Item 1</p>
<div>Item 2</div>
<div>Item 3</div>
<p>Item 4</p>

Using p + div will allow for you to style Item 2, since it's right after a p tag. Example in action.

Using p + p will not style anything, since the next p tag isn't right next to the first one. Example in action.

Using div + p will allow for you to style Item 4, since it's right after a div. Example in action.

And so on...

Answer 3

It is the Adjacent Sibling Selector

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

In less generic terms, it lets you select an element like normal, but to also qualify that it has a particular element before it at the same level.

For instance with this HTML:

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

You could normally select the span by just asking for span, but if you only want to affect the span with a certain style when there is a p just before it you can use p + span. Note, you can't use div + span here because div is at a different "level".

Answer 4

Also added in CSS2 was the direct adjacent combinator. For example, imagine you want to indent all paragraphs in a document except for ones immediately following a sub-heading (<h2>). The second rule below shows an h2 selector combined with a p selector using a plus sign as the combinator to indicate that the declaration applies only if p immediately follows h2:

p { text-indent: 0.5in; }
h2 + p { text-indent: 0; }

From - http://www.xml.com/pub/a/2003/06/18/css3-selectors.html