StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Yes, they are different...</h2> <p><code>#</code> is an <a href="http://css.maxdesign.com.au/selectutorial/selectors_id.htm" rel="nofollow noreferrer">id selector</a>, used to target a <em>single</em> specific element with a unique id, but . is a <a href="http://css.maxdesign.com.au/selectutorial/selectors_class.htm" rel="nofollow noreferrer">class selector</a> used to target <em>multiple</em> elements with a particular class. To put it another way:</p> <ul> <li><code>#foo {}</code> will style the <em>single</em> element declared with an attribute <code>id="foo"</code></li> <li><code>.foo {}</code> will style <em>all</em> elements with an attribute <code>class="foo"</code> (you can have multiple classes assigned to an element too, just separate them with spaces, e.g. <code>class="foo bar"</code>)</li> </ul> <h2>Typical uses</h2> <p>Generally speaking, you use # for styling something you know is only going to appear once, for example, things like high level layout divs such sidebars, banner areas etc.</p> <p>Classes are used where the style is repeated, e.g. say you head a special form of header for error messages, you could create a style <code>h1.error {}</code> which would only apply to <code><h1 class="error"></code></p> <h2>Specificity</h2> <p>Another aspect where selectors differ is in their specificity - an id selector is deemed to be more specific than class selector. This means that where styles <a href="http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm" rel="nofollow noreferrer">conflict</a> on an element, the ones defined with the more specific selector will override less specific selectors. For example, given <code><div id="sidebar" class="box"></code> any rules for <code>#sidebar</code> with override conflicting rules for <code>.box</code></p> <h2>Learn more about CSS selectors</h2> <p>See <a href="http://css.maxdesign.com.au/selectutorial/" rel="nofollow noreferrer">Selectutorial</a> for more great primers on CSS selectors - they are incredibly powerful, and if your conception is simply that "# is used for DIVs" you'd do well to read up on exactly how to use CSS more effectively.</p> <p>EDIT: Looks like Selectutorial might have gone to the big website in the sky, so try this <a href="https://web.archive.org/web/20180313224235/http://css.maxdesign.com.au/selectutorial/" rel="nofollow noreferrer">archive link</a> instead.</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