CSS 101 selector

The Selector

Simple Selectors

The image above shows the basic rule structure used in CSS for linked style sheets and in the style element in the head of a document. There are two parts, the selector and the declaration. The declaration is made up of properties and values. On the left , the selector h1 selects all h1 elements (tags) in the document. On the right the declaration is a combo of a CSS property (in this case color aka the text / foreground color) and a value of #0000ff or blue. All h1 elements will be blue in the document this rule is used in. Here are some other examples:
p{font size: 12px; color: #000000;}
span{background-color: #ffff00; font-style: italic;}

You can apply a rule to multiple selectors by using a comma like this:
h1,h2,h3,h4,h5,h6 {color: #990099;}

Selectors also use id, class, pseudo-classes and pseudo-elements as part of the selector.

Class

Example -- h1.blue{color:#0000ff;}

You can define a style you want to use across many elements like this:
.blue {color: #0000ff;} Note the class name (blue)is preceded by a period and followed by curley brace. Without this syntax, the definition will not work. This definition can then be applied to any element, such as paragraphs, headings, divisions, etc as follows:
<p class="blue"> all text (foreground color) in the paragraph will be blue. Also you could apply it to a heading:
<h5 class="blue">

You can also define a class that would apply to one type of element like this:
h3.blue {color: #0000ff;} This definition can only be applied to h3 elements like this:
<h3 class="blue">. If you applied class="blue" to any other element than h3; it would not work.

Id

Example -- defined like this: h1#one{position:absolute; left:98px; top:16px; width:68px; height:25px; z-index:1;} and then referenced in the html element like this : <h1 id="one">

Ids are similar to classes with one big exception. When you use an id as part of a selector, it can be used for only one unique element for a page. Use an id once and only once in a html document! Got it? OK! The syntax goes like this:
#one {color: #009900;}
<span id="one">dark green text!</span> Note a selector isn't required in a rule for an id.. but still remember id can only be used once in a html document.

Pseudo-class

Example -- a:hover {color: #ff0000; text-decoration: overline;}

Basicly the only support for pseudo classes in current broswers are for the a (anchor) element thus control the style of your links. The pseudo elements equate to the following attributes in a body element.

link="blue" is a:link{color:#0000ff;}
alink="red" is a:active{color:#ff0000;}
vlink="purple" is a:visited{color:#990099;}

Examples are:

Pseudo-elements

Example -- P:first-letter{font-size: 150%;}

So far you only have to know that there are 2 pseudo-elements in CSS1 They are:

:first-letter
:first-line

This is a demonstration of the ":first-letter" pseudo-element (Note the first letter of the paragrah is a drop-cap). The rule looks like this:
p.stl:first-letter {font-size: 200%;}. P is the element; followed by ".stl" which is the class so it can be appled to selected p elements finnished by the ":first-letter" pseudo-element. This rule is then applied by placing the attribute of class="stl" in p elements in this page.

This is a demonstration of the first-line Pseudo-elements.
This is the second line and notice..it is back to normal. Or at least it should be...

This is the rule: p.red:first-line {color: #ff0000; text-decoration: underline; background-color: #ffff00;font-style: italic;} In reality if you're using Netscape 6, IE 6 or Opera 5.12 there appears to be a bug when using a class selector with a pseudo class as the red is on both lines when the second line should be black. This is it on a web page by itself. There are restrictions on using the pseudo classes and elements..for a listing check here.

Contextual Selectors

Hang in there.. we're almost done covering selectors. Contextual selector rules look like:
p span{color:#0000ff;}
This means all span elements that are nessled inside a p element would have the defined style (foreground color of blue) applied to it. However span elements NOT inside a p element would not be changed. This gives the developer a grest deal of power in defining styles. A good example of this is the glossary web page. Using contextual selectors the links in the left coloum are made white so one could see them aginst the blue background. Of course I could have also done the smae style usinf classs but using the contextual selector - I don't have to add a class attribute to all the links inside the td element.

PREVIOUS NEXT