What does it mean to + the same style with itself?

Question

I know, that makes no sense. Take a look here and you'll see what I mean

http://jsfiddle.net/thirtydot/q6Hj8

The part where it is

.yourDivClass + .yourDivClass {....

It seems to eliminate the enclosed style to the end Div. Is it a common way of achieving that effect?

Answer 1

Per section 5.7: Adjacent sibling selectors of the the W3C CSS Specification: (formatting for clarity)

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if

1. E1 and E2 share the same parent in the document tree and
2. E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented:

math + p { text-indent: 0 }

It basically means when the second element is in the same context AND follows the first element in the code directly (without any other elements in between), the following attribute will be added to the second element!

In your jsfiddle example it means that the 'margin-left' will be applied to the whole/both class/es (because both selectors are the same in your example) only if the element is following itself in your code, which it does. Try

<div class="Yourclass">
<div class="cloneofyourclass">
<div class="Yourclass"> 

and no additional margin-left from your example will be applied.

Note that Internet Explorer 6 will not accept any of those selectors! IE7 and higher will do though!