StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>#menu ul</code> targets this (any <code>ul</code> <strong>inside</strong> of an element with <code>id='menu'</code>)...</p> <pre><code><div id="menu"> <ul>  ... </ul> </div> </code></pre> <p>(<code>div</code> is just an example, any element with <code>id="menu"</code> can be used above)</p> <hr> <p><code>ul#menu</code> targets this (the <code>ul</code> <strong>with</strong> <code>id='menu'</code>)...</p> <pre><code><ul id="menu">  ... </ul> </code></pre> <hr> <p><strong>Edit as per comments:</strong></p> <p>Quote: <em>"...i am missing the 'box' around the parent node."</em></p> <p>I think the node to which you refer is the <code><li></code>, just inside the parent <code><ul id='menu'></code>, and you have not targeted it anyplace at all.</p> <p>Just add <code>ul#menu li a</code> to your box styling. (Note the comma. It separates two totally unique selectors sharing the same styling.)</p> <pre><code>ul#menu li a, ul#menu ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } </code></pre> <p><a href="http://jsfiddle.net/cWpEg/1/" rel="nofollow">http://jsfiddle.net/cWpEg/1/</a></p> <p>See the difference?</p> <p><code>ul#menu</code> is the parent. <code>ul#menu li</code> is the first item inside the parent. <code>ul#menu li a</code> is the link inside the first child of the parent.</p> <p>Since <code>ul#menu li</code> targets <strong>any & all</strong> <code><li></code>'s that are children of the <code>ul#menu</code> parent, you would only need the one selector...</p> <pre><code>ul#menu li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } </code></pre> <p><a href="http://jsfiddle.net/cWpEg/2/" rel="nofollow">http://jsfiddle.net/cWpEg/2/</a></p> <p>Also note how it's the full width of the screen.</p> <p>To target & style just the parent, add something like this.</p> <pre><code>ul#menu { display: block; position: relative; float: left; list-style: none; } </code></pre> <p><a href="http://jsfiddle.net/cWpEg/6/" rel="nofollow">http://jsfiddle.net/cWpEg/6/</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