StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can use a direct child selector for the <code>.cart</code> element:</p> <pre><code>.component-bottom .component-basket > .cart { display:none; } </code></pre> <p><br /> Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this. <br /> You can overwrite <strong>all but the first one</strong> <code>ElementA ~ ElementB</code>:</p> <pre><code>.component-bottom .component-basket > .cart ~ .cart { display:block; } </code></pre> <p>This search for all <code>.cart</code> elements inside <code>.component-basket</code> where <strong>ANY</strong> previous adjacent sibling is <code>.cart</code>. The first of the element doesn't have a previous sibling of this class, so it would not be selected.</p> <p>This is called a <a href="http://reference.sitepoint.com/css/generalsiblingselector" rel="nofollow">general sibling selector</a>.</p> <h2><a href="http://jsfiddle.net/BTF39/1" rel="nofollow">jsFiddle</a></h2> <p>This should support IE7 and above:</p> <blockquote> <p>Note Requires Windows Internet Explorer 7 or later.</p> </blockquote> <p>source: <a href="http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx" rel="nofollow">http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx</a></p> <hr /> <p>an easier solution commented by @jrConway:</p> <p>Make it display: block by default and use:</p> <pre><code>.component-bottom .component-basket > .cart:first-child { display: none; } </code></pre> <p><strong><a href="http://jsfiddle.net/BTF39/3/" rel="nofollow">Example</a></strong></p> <p><em>Note that this only work when you use ONLY <code>.cart</code> as child element. Whenever an other class is at the first 'place' it will not work.</em></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