When to use what in CSS

Unsure which selectors to use

[kiwidesign]

Hi,

Just wondering if there is any rules regarding which selector you use in CSS.

e.g.

Table { }
Table.inside { }
.inside { }
#inside { }

I tend to use mostly # but have a feeling their is some rules of order that I am missing.

Any ideas?

[MX_OnD]

Hi,

My thoughts are that tables and css are a no-no,

but as far as ids #{} and classes .{} go think of it like this:

in winter you might put on two or three pairs of socks and a pair of shoes,

in summer you might wear shoes with one pair or no socks at all,

you would never wear two pairs of shoes.

ids are shoes
classes are socks

;)

edit MWPro has just said it much more factually ;) /edit

[edited by: MX_OnD at 11:58 pm (utc) on July 28, 2005]

[MWpro]

# denotes an id, which should only be used for unique elements, or ones that occur only once on the page (like the top banner or bottom footer for example.) You can call it for example by <div id="inside"></div>

. denotes a class, which can be used for multiple items, and is probably what you want to use. You can call it, for example by <div class="inside"></div>

Table { } Will apply the following styles to all tables on the page.

Table.inside { } Will apply the follow styles to all tables with the class "inside" (all <table class="inside"> will get the style)

Also be sure to never have both a class and an id with the same name.

[edited by: MWpro at 11:54 pm (utc) on July 28, 2005]

[MWpro]

My thoughts are that tables and css are a no-no

I don't agree. If you are not concerned with having a full blown css layout, mixing css styles with tables can produce great results. For example:

.table1 {
width: 750px;
border: 1px solid #000;
etc etc etc
}

Then call it by using
<table class="table1">

saves a lot of clutter. My take on it is that if you have to use tables, use CSS to do ALL of the styling, so that your code is not cluttered or messy.

[kiwidesign]

Thanks for the advice everyone.

[bedlam]

Table { }
Table.inside { }
.inside { }
#inside { }

It's all about specificity [w3.org].

• 'table { }' is least specific; these styles apply to all tables. Useful for globally redefining html elements to suit a given layout.
  
• '.inside { }' is next least specific; these styles apply to all elements with the class 'inside'. Useful for styling multiple elements on a single page - especially if you need to apply similar styles to different types of html elements.
  
• 'table.inside { }' is getting more specific; these styles apply to all tables with the class 'inside', but not to other elements with the same class. Useful for styling multiple instances of the same type of html element on a single page.
  
• '#inside { }' is very specific; these styles apply only to a single element with the id 'inside' (i.e. since a given id must be unique on a page). Useful for styling e.g. sections of page layout or any element that will only appear once per page.
  
• 'table#inside { }' is more specific still, ; these styles will will only apply to tables with the id 'inside'. For example, your stylesheet might contain multiple declarations for 'table#inside {}', 'div#inside {}', 'ul#inside {}' with very different styles (but there can still only be one element with the id 'inside' on any given html page). Useful when, on different pages, a given id must be assigned to different html elements.
  

You can also assign selectors that are less specific than any of the above:

* { /* Applies to EVERYTHING */ }

...and you can also achieve unlimited specificity by using contextual selectors:

div#foo div.bar ul li p a b span { color:#f00; }

I don't know why you'd want to do exactly this, but the above style declaration will color only the word 'foobar' in the following markup:

<div id="foo">
<div class="bar">
<ul>
<li>
<p>Lorem ipsum dolor <a href="#">sit amet <b><span>foobar</span> consectetuer</b> adispiscing</a>adit.</p>
</li>
</ul>
</div>
</div>

The cascade [w3.org] and !important rule [w3.org] also impact specificity...

-B

[madcat]

What I do now is create an ID only for major elements: #header, #navigation, #footer and possibly #content.

That's it, only four 3 to 4 ID's in the entire site.

All elements within these major ID components can be targeted with classes. Unless my class has more than one word in it, I will only use lowercase letters...