CSS makes possible dynamic presentation updating. In embedded CSS the "database" goes with the document. It doesn't fulfil the idea of dynamic presentation updating in other way than the embedded CSS gets from server-side scripts from some external file.

In order to find pairs in the "CSS-database" and the current document, the browser needs so-called selectors. They select, what element or elements get defined CSS-properties. I introduce you in these pages into basic CSS2 selectors (like universal selectors, (element) type selector and class selector) and pattern matching rules.

W3C: CSS2: 5 Selectors; 5.1 Pattern matching.

The bare universal selector is the most common way to select something. In the following examples is some other ways to use the universal selector in HTML-documents ():

*{color:red;} /* the first sign is so-called wildcard, which is in this connection necessary; it is common habit to use wild cards (* and ?) in computer applications */
*.other {color:blue;} /* in this case the wild card in not necessary, because there is a separation dot and after the dot is so-called class selector, which I explain later */
.other {color:blue;} /* this is equal to the preceding way */

As you can see, selectors are connected into declaration-blocks (the explanation). When a declaration-block has been affiliated into an announcement of some selectors, it is a rule. This is a very simple rule:

*
{font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
text-align:justify;}

The following conceptual scheme illustrates the relationships of different terms (the * means the universal selector or any other possible selector; The declaration-block can have multiple declarations):

Rules are called also as rule sets and statements. Exactly written rules are statement-blocks (or block-statements look at also the Footnote 1). Simple rules and complex rule sets always 1) identifies the elements in a page that it affects and 2) tell the browser how to draw these elements (what are the properties of the selected elements).

Element type What are selectors, classes and id-attributes

The most common way is often too covering and in practice the universal selector has always some specifier. Element type selectors have the next higher priority. In fact the pattern matching principle begins really work from element type selectors, because the browser must search for individual targets. That's why the basic selector can be regarded a simple element type selector or just a type selector.

In this case the identifier is the name of an element. The following rule concerns the element H2 ():

h2 {color:#660033; background-color:#ff3; border:#660033 1px solid; font-size:17px}

The element type name in the CSS-rule and the corresponding name inside start-tags create matching pairs.

Remember, that in XML element identifiers are always case sensitive. In XML the element type names in the CSS-rules and in the target documents must have the same cases.

Grouping

So that same declaration-blocks should not be repeated to many elements, it is possible to use grouping. In a group can be called any type of selector with different combinations (I explain later, what some individual rules might mean). In this connection is elementary only to know, that individual members in the group are separated with commas. Here is some example of possible groups ():

h1,h2,h3,h4,h5,h6 {color:red; background-color:yellow; border:red 1px solid;} /* in this group is only simple type selectors, which instead of separate definitions are defined at the same time; repeated commas are allowed and the list should not end with a comma */
h1, p.red {color:red;background-color:yellow;border:red 1px solid;} /* in this group the second member has class-specifier - I explain next the usage of it */
ol li, ol li li li {color:red;background-color:yellow;border:red 1px solid;} /* in this group is some matching patterns (I explain the usage of them in other connection) */

Previous page

Sections of page:

Next page

Class and id selectors (like attribute What are selectors, classes and id-attributes, which I handle later) have higher weight as bare element type selectors. According to the HTML specification the name of the id attribute should be document-wide unique. The id attribute has been called also as the fragment identifier. In principle an id-attribute works as as an unique identifier of some fragment of a web page.

It is however remarkable that CSS-capable browsers accept in CSS the same value of the id-attribute in several places in a document. In practise id selectors could be used (against HTML-specifications) in several places in the same document together with class selectors. In this case classes would define common properties and an id selectors would specify exceptional properties. Indeed the problem is that if documents are intended to check with some validator services, they complain errors. The same result can however be achieved by using for the same element several classes (I give an example further).

You can give quite freely names to class and id-selectors, but there is however some limitations:

• The name must start with a normal letter (a-z,A-Z). Accepting the underscore (_) has been afterward added into CSS2.

• You can use also number + hyphen, but you can't start with them.
• Names are case-insensitive in HTML and case-sensitive in XML.
• If you want to use special character, you must put the escape character \ (backslash) before them like w\?. In theory it is also possible to use ISO 10646 characters 161 and above as a numeric code. It is possible to use character references inside style attributes (like style="voice-family: D&#252"), but these don't work in external files or inside the element STYLE (they need escaped characters with backslashes).

In fact in this way the element has always two or more identifiers. First the element type name (P) and second the class name red. These two identifiers are combined together. If the class is connected to the universal selector, in practice the element can be identified from the class name (the universal selector doesn't select any specific element).

.red {color:red;}

This rule can be used (almost) into any element by putting class="red" to the start-tags of elements. Remark however, that syntactical the class selector is always connected into another identifier and rule.

In a way class selectors are attribute selectors, which use dots as separation marks (I give some examples later). CSS2 gives the possibility to use pure attribute-based selection method by using generic attribute What are selectors, classes and id-attributes, which can be understand as actual attribute selectors. In principle any attribute and its value(s) work as identifiers. Because class is in the semantic meaning an attribute, it should be able to express like any other attribute. I handle next attribute selectors.

It is possible to give for same elements several classes by adding spaces (for example class="a b c"), for example:

I don't however regard that kind of practise as very good. Properties might be contradictory. Browsers get additional work and the author of the CSS might get easily confused. If they are intended to use, the author must be especially careful.

Attribute What are selectors, classes and id-attributes

Generic attribute selectors are primary designed for XML-documents in order to ensure that CSS can be used with any XML-based language (some language require supporting of them). According to CSS2 rules like *.red {color:red;} and p.red {color:red;} are intended to use only in HTML-documents. In XML-document should not use these kinds of connected rules. In XML-document should be used universal selectors, element type selectors, attribute selectors and combinations of them.

Because XML is a meta language elements and attributes (except some basic XML-attributes) don't have any default behavior or task. Elements and attributes must be able to identify as such. Even if rules like .class {} and #id {} (I handle the latter rule type further) don't belong to strict XML-based languages browsers, which support XHTML are expected to support them. In XML-languages rules, which have the formats .class {} and #id {} should not be automatic accepted. The same concerns also the CSS, which is inside style attributes. They should work only if the used document type supports id, class and style attributes at the same way as in HTML.

Attribute selectors use brackets ([]). Attribute selectors use attribute names and attribute values as identifiers. They work together with other selectors like in these examples ():

[href] {color:blue} /* according to this example all elements, which have the attribute href got blue color; only the attribute name is used as the identifier */
[class="example"] {color: blue;} /* every element, which have the class-attribute example got blue color; In this case the attribute name and the exact value is used as identifiers */
[class~="red"] {color:red;} /* every element, which have the class-attribute red, got red color; ~-sign is not necessary in this case; it can be used if class attributes have space separate list of values, for example class="green red" (the rule in this example concerns also this attribute) */
*[src] {background-color:blue} /* every element, which have the attribute src, get background-color blue; Note, that I have put in this case the universal selector (*) even if it is not in principle necessary */
span[class="example"] {color: blue;} /* the SPAN element, which have the class-attribute example get blue color; - Note that, the element type selector is attached to the attribute selector; Space between them exchange the meaning of the rule to this: SPAN elements, which follow an element, which has as an attribute class="example", got blue color (I explain later more carefully these kinds of rules) */
p[class~="red"] {color:red;} /* those P elements, which have as a class-attribute red got red color */

If class selectors are expressed as attribute selectors, they should have the same specificity. If there is two kind of definition, just the order of rules should matter like in these cases:

.test {color:red}
*[class="test"]{color:blue} /* this rule has the same priority as the previous rule, but it is after it and then overrule it; Some MS IE browsers understand this as an universal selector */
p.test {color:olive} /* this rule overrule the previous rule, because this is more specific */
p[class="test"]{color:green} /* this rule has the same priority as the previous rule, but it is after it and then overrule it */

You can look at more examples from the error page, how browsers should work.

Id-selectors have higher weight than than attribute selectors. Then for example #p123 {...} is more specified than [id="p123"] {..} even if they match to the same place in the body of the document like <P id="p123">) like style="color:#660033; background-color:yellow;". This matter have any meaning today, but thinking about future, this is worth to keep in mind (look another example from the error page).

Even if style-attributes don't have actual rules (they have only individual declarations and a single declaration-block), they create in the processing logical rules, which correspond the weight of them. According to CSS1 specification id-selectors have the same weight as declarations, which are inside style-attributes:

A declaration in the STYLE attribute of an element (...) has the same weight as a declaration with an ID-based selector that is specified at the end of the style sheet.

The CSS2 specification says (6.4.3 Calculating a selector's specificity), that they are considered to be after all other rules. This not a matter of weight but the cascading order, which I handle later.

Pseudo-class is an assistant concept, which gives the possibility to classify elements like by using classes, but in some cases relating to outstanding features of the HTML-document (for example if the link has been followed or not).

Pseudo-element is an assistant concept, which is related to the presentational sub-part of the elements (like the first letter or row) resembling the way, how CSS is related with element type selectors.

In CSS2 special pseudo-classes are also :left and :right. They are used in page breaking (those rules don't work today in in many browsers, but in future they are very useful).

W3C: CSS2: 13 Paged media, 17 How to set CSS for table elements (.
Other sites: John Allsop: Kinds of Selector.