Intro to CSS Selectors

From the writing-things-down-so-I-can-find-them department….
Selectors in a nutshell:

  • tagname — applies the style rules to all instances of that tag. (About the only place I use this is to “reset”, p, div, and some others to display the same way across all browsers.
  • #idname — all HTML (or XML) tags can have an id attribute. The value of the id attribute must, must, must be unique across the entire page. #idname lets you set the style for that element. (For example, on the shoreleave site, all pages have a div with id=”content”. I then have a #content rule (in a shared CSS file) which forces all the content areas to look the same.
  • .classname (note the leading period!) — these are the values which appear in the class= attribute. You can also specify this with a tag name as in p.class1 and div.class1 so class1 would have separate meanings when attached to a p versus a div. (This is not necessarily a good idea, name overloading is confusing after all.)

You can also group things like this…
div p.classname which would mean, ‘Anytime a div tag contains a p with class=”classname”, the p should be displayed according to this rule…’