introduction ~ selectors ~ properties ~ advanced ~ real world CSS HTML element | class | ID | contextual | link pseudo class | pseudo element | selector groups | dynamic pseudo class | language pseudo class | child | first child | adjacent | attribute | row & column

selectors

I really don't believe that cascading style sheets are hard to master, but they can be a little tricky. We'll now look at what may be considered the hardest part of style sheets to understand: selectors.

What do selectors do?

You'll probably find the constant repetition a little tedious, but I do want to reiterate what a selector does.

A selector identifies elements on an HTML page. Browsers use selectors to determine which elements on a page are affected by a statement.

Now, we saw in the previous lesson that selectors can identify HTML elements, such as paragraphs, the body, and so on. In fact, selectors can identify any html element, but they can do a lot more than that. We'll take a look at the different types of selector, then concentrate on each type, what it does, and how to use it. You're now really entering the reference aspect of this guide.

Kinds of selector

CSS1 introduced 7 distinct kinds of selector.

1. HTML element selectors
2. class selectors
3. ID selectors
4. contextual selectors (now referred to as Descendent Selectors in CSS2 )
5. link pseudo class selectors
6. pseudo element selectors
7. selector groups

CSS2 amended some of these a little, and added the following selectors

1. dynamic pseudo class selectors
2. language pseudo class selectors
3. child selectors
4. first child selectors
5. adjacent selectors
6. attribute selectors
7. row and column selectors

We look at each kind of selector individually and for each selector we ask:

• what they do
• how they are formed
• why you might use them
• how well they are supported in various browsers

next: HTML element selectors

(C)1997-2001 Western Civilisation Pty. Ltd.