A selctor in CSS is used as a pattern matcher, a pattern is specified by the selector. If this pattern is matched in the document the appropriate style rules (specified after the selector) are applied to the matched element or elements.
An example of a simple selector is given below.
..
<style type="text/css">
p {color : blue; background-color : white}
</style>
..
<p>Some Text</p>
..
Here in the style section of the document we have selector p this is known as a type selector.
A Simple selector includes a type selector or the Universal Selector * which matches all elements. This may be followed by zero or more ID selectors, attribute selectors or psuedo-classes. An example showing how to use id and attribute selectors, and psuedo-classes is given below.
<style type="text/css">
p {color : blue; background-color : white}
#uniqueID {border : thin solid}
p[class=introduction] {font-size : large}
a:hover {color : green; background-color : white}
p.introduction {font-weight : bold}
</style>
..
<p class="introduction">Some Text</p>
<p id="uniqueID">This element is uniquely identified</p>
<p>this is <a href="http://www.benmeadowcroft.com">a link</a> to my homepage</p>
The first style rule is applied to all p elements.
The second style rule is an ID selector, however it is not preceded by a type selector, if a type selector is not specified the universal selector is assumed to be in operation. Each ID is unique, no two elements should have the same ID, this rule matches the element with the ID which equals "uniqueID".
The third style rule is an attribute selector, it matched all p elements which have an attribute "class" whose attribute value is exactly "introduction".
The fourth style rule is a applied to any a element when the user designates the element but does not activate it, e.g. when the mouse cursor is over the link.
The fifth style rule is simply a short hand form of the attribute selector for the class attribute. See rule three for the longer form.
Grouping selectors which all are to share common style rules is by mean of a comma separated list of simple selectors
h1 {color : green}
h2 {color : green}
h3 {color : green}
/*is equivalent to:*/
h1, h2, h3 {color : green}
Combining rules can be a more complex affair and is achieved by using descendant, child and adjacent selectors.
div.intro h1 {color : green}
div.intro * em {color : yellow}
h1 {color : black}
..
<div class="intro"><h1> This will be green </h1></div>
<div class="intro"><code><em> This will be yellow </em></code></div>
<h1> This will be black </h1>
The first rule is applied to h1 elements that are descendants of div elements with a class attribute equal to "intro".
The second rule is applied to em elements that are grandchildren or later of a div element with a class attribute of "intro".
Child selectors > , and adjacent selectors + , are demonstrated below
div.intro > h1 {color : green}
div.intro em {color : yellow}
code + strong {color : blue}
..
<div class="intro"><h1> This will be green </h1></div>
<div class="intro"><code><em> This will be yellow </em></code>
<strong>This will be blue</strong></div>
The first rule is applied to h1 elements that are children of div elements with a class attribute equal to "intro".
The third rule is applied to strong elements that are adjacent to code elements. They share the same parent (in the document tree) and code immeadiately precedes strong.