Understanding CSS Selectors

Posted by leigerleiger on 1257122179|%A, %e %B %Y, %H:%M

What is the difference between .selector, #selector and selector? I'm always guessing at which one to use.

Thanks to the contributions of Ed Johnson and Steven Heynderickx, I have an answer.

selector is called a Type selector. These generally refer to site-wide HTML elements like <a …>…</a>, <body>…</body>, <h1>…</h1>, <h2>…</h2>, <table>…</table>, etc.

.selector is called a Class selector. These are used to apply the class to an element like <table class="mytablestyle">…</table>.

#selector is called an ID selector. These are used to apply styles to DIVs that are given an id attribute like <div id="mydiv">…</div>.

Here's some specific examples from some Wikidot HTML sources and corresponding CSS:

HTML Source Selectors Related CSS
<blockquote>
<p>Could you take a second to review <a href="http://blog.wikidot.com/design:2">http://blog.wikidot.com/design:2</a> and make sure it gives you what you need? Thanks.</p>
</blockquote>
blockquote, p, a
blockquote{
    border: 1px dashed #999;
    padding: 0 1em;
    background-color: #f4f4f4;
}
a{
    color: #00A;
}
p{
    font-family: verdana,arial,helvetica,sans-serif;
}
<div class="gallery-box"> .gallery-box
.gallery-box{
    overflow: hidden;
    width: 98%;
}
<div id="side-bar"> #side-bar
#side-bar{
    float: left;
    width: 14em;
    padding: 1em;
    margin: 0 0 1em 0;
    clear: left;
}

Leave a comment

Add a New Comment
Page tags: css themes
Please read the Legal Guidelines before using any of my work. In almost all circumstances, you should ask permission first.