can somebody explain this to me

[diabolo]

http://www.webmasterworld.com/forum83/100.htm

p + p { margin-top: 0.5em; }
The first one sets the top margin of all paragraphs to 1/2 space (more or less). The second one does that for only paragraphs that follow other paragraphs (i.e., it doesn't set the margin of the first paragraph on the page, or the first paragraph in a section).

I've been around CSS for quite a while, and I have never seen anything like p + p

is it a legit css, is so, can somebody link/tell me more about it

 

[saif7463]

It is valid CSS.

CSS has 'selectors' which essentially let you do pattern matching for styling an element. See http://www.w3.org/TR/CSS2/selector.html#pattern-matching

As it states, "E +F Matches any F element immediately preceded by a sibling element E." Therefore in your example, every <p> that is preceded by a <p> will have a margin of .5em. Effectively, you are adding more space between paragraphs.

 

[misson]

To expand on saif7463's answer, the '+' is called the adjacent sibling combinator (CSS 2.1, section 5.7). Support for it was added to IE7. Other browsers have supported it for awhile.

 

[descalzo]

<div>
 
<p> nothing added here </p>
 
<p> this has 0.5em top margin </p>
 
<p> so does this</p>
 
<span>not a paragraph, no added margin</span>
 
<p>not adjacent sibling, no added margin</p>
 
</div>