StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In this instance, <code>#store > #shoppingCart{}</code> is a little useless, <code>#shoppingCart</code> should be unique, so you don't need to reference any parents or anything, which is what <code>></code> essentially does. </p> <p><a href="http://www.w3.org/TR/css3-selectors/#child-combinators" rel="nofollow"><strong>Child Combinator or <code>></code></strong></a></p> <p><code>#a > #b</code> means a <code>b</code> element that is a child (but not a grandchild, and so on) of <code>a</code>, eg:</p> <pre><code> <div id="a"> <div id="b"></div> // selects this element </div> </code></pre> <p><a href="http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators" rel="nofollow"><strong>Adjacent Sibling Combinator or <code>+</code></strong></a></p> <p><code>#a + #b</code> means a <code>b</code> element that comes directly after <code>a</code> in the dom, eg:</p> <pre><code> <div id="a"></div> <div id="b"></div> // selects this element </code></pre> <p><a href="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators" rel="nofollow"><strong>General Sibling Combinator or <code>~</code></strong></a></p> <p><code>#a ~ #b</code> is similar to <code>+</code>, but it is any sibling after it in the dom, so the following could work:</p> <pre><code> <div id="a"></div> <div> <a></a> </div> <div id="b"></div> // selects this element </code></pre> <p>However, as for your question, you probably want something like this:</p> <pre><code>#store:hover ~ #shoppingCart { // mouse is hovered over #store and we want to affect a sibling // with id #shoppingCart that is "later" in the dom } </code></pre> <p>More info on selectors can be found <a href="http://www.w3.org/TR/css3-selectors/#selectors" rel="nofollow">here</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload