Selector

The selector of a CSS rule set is an expression for pattern matching with all elements to determine which style rule declaration can be applied to elements in the source document tree. Except for selectors of user agent default style sheet, selector can match zero or more elements in the source document. And each element in the document can therefore be matched with zero or more selectors in the list of CSS rule sets. CSS style rules are then applied to elements based on the cascading order and the specificity accordingly.

But for inline style, no selector is needed, since all CSS declaration is specified as the value of 'style' attribute in form of the semi-colon-separated propertyname:value pair list accordingly.

Pattern Matching

Pattern matching is the pairing mechanism of CSS which is used to apply the corresponding declarations according to the which, where, and when patterns of the selector. In general, the pairing mechanism can be divided into three areas, that is the relative structure of an element tag in the document tree, the information of an element tag, and the form of an element tag.

The Relative Structure of Element Tag

The specified expression of the selector is the relative pattern of a selected element tag.

The information of Element Tag

The specified expression of the selector is the information of a selected element tag.

The form of Element Tag

The specified expression of the selector is the form of a selected element tag.

Selector Syntax

Not CSS Specification Related

The expression of a selector is a series of one or more delimiter-separated selectors.

Types of Selectors

According to the method of pattern matching, the types of selectors can be divided into four types, simple selector, compound selector, complex selector, and grouped selector.

Specificity of Selector

The specificity of selector is used to determine the order and precedence of selector in the combined CSS rule sets. There are two special case in specificity of selector. The first one is the inline [style] attribute which has the highest specificity because the style declaration is specified in the specified element. Another one is the universal selector, *, which has no specificity because the selector is used as a dummy selector to match all element in the document tree. While other selectors can be grouped into three catalogues. The weighted specificity of selector is obtained by counting and comparing the number of selector components according to these three catalogues. The five types of specificity of selector are.

Order of Selector

The weighted specificity of selector is not the only factor that affecting the order of selector in the combined CSS rule sets. By default, CSS rule sets are arranged according to the cascading order of creators to which the CSS !important rule  properties also play an important part. The decending order of precedence for creators:

1. user important declarations
2. author important declarations
3. author normal declarations
4. user normal declarations
5. user agent declarations

Focus on the author normal declarations only, the order of attributes and attribute values other then the 'style' attribute do not affect the precedence of CSS rule sets. The precedence of CSS rule sets is only affected by the order of loading the CSS style sheets and CSS rule sets according to the order specified in the document. By default, the precedence of CSS rule sets applies to both within a single style sheet and multiple style sheet of any types. In other words, the last declared rule set will have higher precedence than other previous declared rule sets of the same selector specificity in the same style sheet. And the last loaded style sheet will have higher precedence than other previous loaded style sheet.

Precedence of Property

The order and precedence of CSS rule sets is only used to specify the precedence of properties for a specific element and its pseudo-element. Since the declarations of two different CSS rule sets of different precedenc may not be the same, the properties of lower precedence may survive in the properties overriding process. In other words, the previous specified property values will only be overrided if same properties of higher precedence are specified. In general, the steps of specifing a specific element or its pseudo-element are as following or inversely in resevsed order.

1. Assign all user agent specified declarations to the specific element and its pseudo-element according to the precedence of property.
2. Override all available properties specified in user normal declarations to the specific element and its pseudo-element according to the precedence of property.
3. Override all available properties specified in author normal declarations to the specific element and its pseudo-element according to the precedence of property.
4. Override all available properties specified in author important declarations to the specific element and its pseudo-element according to the precedence of property.
5. Override all available properties specified in user important declarations to the specific element and its pseudo-element according to the precedence of property.

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {background-color:yellow;color:black;border:1px solid black;margin:5px;padding:5px}
p {background-color:cyan}
p:first-line {background-color:silver}
p:first-letter {color:red}
p[clr] {background-color:blue}
p:last-child[clr] {background-color:red}
p:first-of-type, p:first-child, div ~ p[clr] + p {background-color:pink}
div + p + p::first-line {background-color:yellow}
p + p + p + p[clr] {background-color:green}
* + p + p + p[clr] {background-color:orange;border-width:13px}
p + p + p[clr] {background-color:red;border-width:5px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>div
<p>p</p>
</div>
<p>p</p>
<p clr="blue">p</p>
<p>p</p>
<p clr="blue">p</p>
<p clr="blue">p</p>
    </body>
</html>