What's css style "p + p"?

Question

Using firebug, I found that blueprint css framework is applying this style to my <p> tags:

p + p {
margin-top:-1.5em;
text-indent:2em;
}

I don't know what the + means.

What's the difference between this and just definining a style for p without + p?

Answer 1

This selector means that the style applies only to paragraphs directly following another paragraph.
A plain "p" selector would apply the style to every paragraph in the page.

See adjacent selectors on W3.org.

Edit: no, it will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way. See also Microsoft's overview for CSS compatibility in Internet Explorer.

Answer 2

It would match any element 'p' that's immediately adjacent to an element 'p'. See: http://www.w3.org/TR/CSS2/selector.html

Answer 3

It's the Adjacent sibling selector.

From Splash of Style blog.

To define a CSS adjacent selector, the plus sign is used.

h1+p {color:blue;}

The above CSS code will format the first paragraph after any h1 headings as blue.

Answer 4

"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).

Answer 5

It selects the next paragraph and indents the beginning of the paragraph from the left just as you might in Microsoft Word.