CSS Adjacent Selector Issue

The HTML looks like this:

<div id="content_wide">
<div class="photo-center borderless"><img src="http://example.com/travel-path-map.png" alt="" title="" /></div>

...but for some reason I can't seem to target the photo-center div like this:

#content_wide + .photo-center { margin-top:10px }

Interestingly enough, a more general child selector works:

#content_wide > .photo-center { margin-top:10px }

Thoug开发者_运维技巧hts?

---

The div with the class photo-center is inside the div with the id content_wide so the child selector (>) works. The adjacent selector (+) would only work if they were next to each other, similar to this:

<div id="content_wide"><!-- content --></div>
<div class="photo-center borderless"><!-- more content --></iv>

---

In your posted code, .photo-center is a child of #content_wide, not a sibling.

The + is a sibling selector and the > is a child selector.

The sibling selector isn't working because the elements aren't siblings.

---

You can't use + because .photo-center is not an adjacent sibling of #content_wide, it's a direct descendant (a child), so you can use the child selector >.

According to the Mozilla docs for adjacent sibling selectors:

The + combinator separates two selectors and matches the second element only if it is immediately following the first.

The child selector documentation says:

The > combinator separates two selectors and matches the second element only if it is a direct child of the first.

Here is a jsFiddle demo of the above selectors, http://jsfiddle.net/YcHKm/1/

---

That's because .photo-center isn't adjacent to content_wide. It is a child of content_wide.

Here is an example of adjacent tags:

<h1>Test</h1>
<h2>Test</h2>

In this example, h2 is adjacent to h1. This way, the + selector should work.