What does this mean for the same style?

Question

I know this doesn't make sense. Take a look here and you will see what I mean

http://jsfiddle.net/thirtydot/q6Hj8

Part where is

.yourDivClass + .yourDivClass {.... 

It seems to exclude the attached style until the end of the div. Is this a general way to achieve this effect?

Answer 1

Section 5.7: Adjacent Selector Rollers for the W3C CSS Specification: (formatting for clarity)

Adjacent selector groups 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).

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

 math + p { text-indent: 0 } 

This basically means that the second element is in the same context. And it follows the first element directly in the code (without any other elements between them), the next attribute will be added to the second element!

In your jsfiddle example, this means that "margin-left" will apply to everything / both classes / es (since both selectors in your example are the same) , only if , following the element in your code, what it does. Try

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

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

Please note that Internet Explorer 6 will not accept any of these selectors! IE7 and above will do it!

Answer 2

This means that you are looking for a .yourDivClass , which is a brother immediately after another .yourDivClass .

Answer 3

The adjacent sibling selector has good support among modern browsers. This is great for styling certain things, like the first paragraph after the heading or the second of two order lists, etc.