Struggling for Competence

CSS Selectors

Cascading Style Sheets (CSS) are used to style html documents. A CSS statement has two parts: a selector, which specifies the part of the document, and declarations, which describes the formatting to apply. A typical piece of CSS looks like this:

typical piece of css, showing selector and declarations

The key to CSS is understanding how selectors work. The table summarises the main selectors in CSS 2.1.

CSS 2.1 Selectors
Selector Example Explanation
Type li { color: blue; } Matches all the li elements.
Class .intro { color: red; } Matches all elements with the intro class attribute.
ID #nav { color: blue; } Matches the single element with the id nav.
Descendent div p { colour: green; } Matches all elements p which are contained within a div. The p does not have to be a direct descendent.
Universal * { margin: 0; padding: 0; } Matches all elements.
Child div > em { color: blue; } Matches all em which are a direct descendent of a div. (Not IE6)
Adjacent h1 + h3 { margin: -20px; } Matches h3 which immediately follow an h1. (Not IE6)
Attribute img[src] { margin: 0; } Matches all img elements whose src attribute is set. (Not IE6)
Attribute img[src="small.gif"] { margin: 0; } Matches all img elements which contain an attribute src="small.gif". (Not IE6)
Pseudo p:first-letter { font-weight: bold; } Style information not available in the document tree.:first-letter :first-line :first-child :link :visited :hover :active :focus
Not IE6::before :after

An ID can only be used once within a document, whereas a class can be used multiple times. In the style sheet the ID selector has greater weight than class selector. ID's are generally used to identify the top level containers on the page, classes are then used to identify the lower level containers. ASP.NET has a problem with ID's, it tends to mangle the id attribute for elements with runat="server". For these elements you have to stick with the class attribute, which ASP.NET leaves alone.

Selectors can be grouped as a comma-separated list, if they share the same declaration block. For example:

a grouped css selector

With grouped decent selectors, you need to be careful that you repeat the whole decent. For example #sidebar h2, h3 will select the h2 elements in the sidebar, plus the h3 elements in the whole document.

I'm embarrassed to admit that I learnt my basic CSS from Sams Teach Yourself CSS in 10 Minutes by Russ Weakly. But hey, honesty is the best course, and its actually an OK book.