Fw: Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

http://www.quirksmode.org/css/selectors/

http://techbrij.com/css-selector-adjacent-child-sibling

Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

ByBrij Mohan

It explains How to use different signs (+,> and ~) in CSS selector and their differences. Before starting, let us take a sample code to understand the signs.

?

<div id="container">               <p>First</p>     <div>         <p>Child Paragraph</p>     </div>    <p>Second</p>    <p>Third</p>      </div>

Space:

?

div#container p{ font-weight:bold; }

It is the descendant selector. It will target all p tags within container div.

> Sign:

It will target elements which are DIRECT children of a particular element.

?

div#container > p {   border: 1px solid black; }

It will target all P element which are direct children of container div, not children of child div.

+ Sign:

It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

?

div + p {     color: green;  }

It will only select the first element that is immediately preceded by the former selector. In our example, it will target to Second ONLY because the owner P element comes just after Div tag.

~ Sign:

It is general sibling combinator and similar to Adjacent sibling combinator. the difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.

?

div ~ p{ background-color:blue; }

It will target both second and third.

Hope, you enjoyed this.

~~~~~~~~~~~

CSS '>' selector

a > b:
a裡面第一層既b.

http://stackoverflow.com/questions/4459821/css-selector-what-is-it

It means immediate children.

Thus if you have three tiers of divs:

<div class='a'>
    <div>
        <div>...</div>
    </div>
</div>

and you have a selector

.a > div { ... }

then it will affect the second level div, and not the third.

CSS '+' selector
a + b:
a緊接住既b.
http://www.quirksmode.org/css/selectors/selector_adjacent.html

<pre>
pre + p {color: #CB000F;}
</pre>

<p id="test">The <code>pre + p</code> selector means "each P element that is preceded by a PRE element".
So this paragraph should be red and the other P's on the page shouldn't be.</p>

<p>This paragraph should not be red.</p>

pre + p {color: #CB000F;}

The pre + p selector means "each P element that is preceded by a PRE element". So this paragraph should be red and the other P's on the page shouldn't be.

This paragraph should not be red.

CSS '~' selector
a ~ b:
a後面所有既b.

http://www.quirksmode.org/css/selectors/selector_sibling.html

<pre>
pre ~ p {color: #CB000F;}
</pre>

<p>The <code>pre ~ p</code> selector means "each P element that is preceded by a PRE element", but, unlike
the <code>pre + p</code> <a href="selector_adjacent.html">adjacent selector</a>, the <code>&lt;pre&gt;</code>
element doesn't have to be the <em>direct</em> preceding element.</p>

<p>Therefore this paragraph, too, should be red. Although it's not directly preceded by a <code>&lt;pre&gt;</code>,
the <code>&lt;pre&gt;</code> is a general previous sibling.</p>

<div>
    <p>This is a paragraph in a div. Since this paragraph doesn't have the <code>&lt;pre&gt;</code> as a previous sibling
    (it's more like an uncle; a previous sibling of this paragraph's parent node), it shouldn't be red.</p>
</div>

pre ~ p {color: #CB000F;}

The pre ~ p selector means "each P element that is preceded by a PRE element", but, unlike the pre + p adjacent selector, the <pre> element doesn't have to be the direct preceding element.

Therefore this paragraph, too, should be red. Although it's not directly preceded by a <pre>, the <pre> is a general previous sibling.

This is a paragraph in a div. Since this paragraph doesn't have the <pre> as a previous sibling (it's more like an uncle; a previous sibling of this paragraph's parent node), it shouldn't be red.