4

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?

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Andy
  • 1,422
  • 5
  • 27
  • 43
  • 4
    http://www.w3.org/TR/CSS2/selector.html see 5.7 – Anonymous Nov 29 '11 at 19:32
  • @danontheline: seems like an answer to me. Answer's the question perfectly – Ayush Nov 29 '11 at 19:33
  • 1
    possible duplicate of [What's css style "p + p"?](http://stackoverflow.com/questions/1139763/whats-css-style-p-p) – Álvaro González Nov 29 '11 at 19:33
  • For more informations about CSS selectors, check this: http://www.w3schools.com/cssref/css_selectors.asp – SteeveDroz Nov 29 '11 at 19:40
  • @Oltarus good and bad link here. The list is easier to read and access when you just need to remember something. Often W3Schools is not up-to-date though and has false information, see http://w3fools.com/ – Anonymous Nov 29 '11 at 19:52
  • 2
    I thought I explained it adequately in the first place: http://stackoverflow.com/a/7080035/405015 :) – thirtydot Nov 29 '11 at 22:21

3 Answers3

6

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!

Community
  • 1
  • 1
Anonymous
  • 3,679
  • 6
  • 29
  • 40
1

It means you're looking for a .yourDivClass which is a sibling directly after another .yourDivClass.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
1

The Adjacent Sibling selector has fairly good support among modern browsers. It's great for styling certain things, like the first paragraph after a header or the second of two ordered lists, etc.

dfw
  • 31
  • 2
  • 4