KILL IE6

04 Selectors

Selectors define the scope of a style. In other words, they define what elements should be styled according to a CSS rule.

Element selectors

This style applies to exactly this element.

h1 { color: green; }
means: Set the text color of all h1 elemeents to green.
body { background-color: gray; }
means: set the backround color of the body element to gray.

Group selectors

Group selectors allow you to select multiple elements.

h2, h3 { color:gray; }
means: set the text colors of all h2 and h3 elements to gray.

Context sensitive selectors

Allows you to select elements based on their parent elements.

h1 { color: red; }
h1 a { color: blue; }
means: a elements inside h1 elements will be shown in blue. Other h1 content will be shown in red.

Class selectors

The class attribute allows to assign a particular style to an element. classes can be created specific to an element or generic. CSS syntax puts a dot in front of the class name.

.blau { color:blue; } can be assigned to any element
<p class="blau"> this text will be blue </p>
h2.rot { color:red; } only applies to the h2 element
<h2 class="rot"> red heading </h2>

ID selectors

ID is an attribute to uniquely name an element.
ID selectors do have a caret in front of them #

<div id="logo"> LOGO IMAGE </div>
#logo { background-color: green; }
assigns a green background to the element with the ID logo

Pseudo selectors

The a element can be styled differently through pseudo classes. The correct order is important.

a:link = normal hyperlink
a:visited = visited hyperlink
a:hover = pointer hovers over the hyperlink
a:active = hyperlink is selected

Attention: Pseudo class selectors are only supported with browsers starting with version 5. Older browsers ignore them.

further Articles