Sideway
output.to from Sideway


Cascading Style Modelnew



Draft for Information Only

Content

Selector
 Pattern Matching
  The Relative Structure of Element Tag
  The information of Element Tag
  The form of Element Tag
 Selector Syntax
  Types of Selectors
  Specificity of Selector
  Order of Selector
  Precedence of Property
  Example

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.

ExpressionDescrioptionMeaningLvl F EDescendant combinatorMatches any E element that is a descendant of a F element1 F > EChild combinatorMatches any E element that is a child of a F element2 F + ENext-sibling combinatorMatches any E element that is immediately preceded by a sibling F element2 F ~ ESubsequent-sibling combinatorMatches any E element that is preceded by a F element3

The information of Element Tag

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

ExpressionDescrioptionMeaningLvl [style]Inline styleMatches an element with a "style" attribute, and uses the attribute value as rules declaration1 E[att]Attribute selectorMatches an E element with a "att" attribute2 E[att="val"]Attribute selectorMatches an E element with a "att" attribute of value exactly equals to 'val'.2 E[att~="val"]Attribute selectorMatches an E element with a "att" attribute having a exactly 'val' in the whitespace-separated list.2 E[att^="val"]Attribute selectorMatches an E element with a "att" attribute of value begins exactly with the string 'val'.3 E[att$="val"]Attribute selectorMatches an E element with a "att" attribute of value ends exactly with the string 'val'.3 E[att*="val"]Attribute selectorMatches an E element with a "att" attribute of value contains the substring 'val'.3 E[att|="val"]Attribute selectorMatches an E element with a "att" attribute that is having a list of hyphen-separated value beginning with "val" from the left.2 E:rootStructural pseudo-classesMatches an E element that is the root of the document3 E:nth-child(n)Structural pseudo-classesMatches an E element that is the n-th child of its parent3 E:nth-last-child(n)Structural pseudo-classesMatches an E element that is the n-th child of its parent, counting from the last one.3 E:nth-of-type(n)Structural pseudo-classesMatches an E element that is the n-th sibling of its type.3 E:nth-last-of-type(n)Structural pseudo-classesMatches an E element that is the n-th sibling of its type, counting from the last one.3 E:first-childStructural pseudo-classesMatches an E element that is the first child of its parent2 E:last-childStructural pseudo-classesMatches an E element that is the last child of its parent3 E:first-of-typeStructural pseudo-classesMatches an E element that is the first sibling of its type3 E:last-of-typeStructural pseudo-classesMatches an E element that is the last sibling of its type3 E:only-childStructural pseudo-classesMatches an E element that is the only child of its parent3 E:only-of-typeStructural pseudo-classesMatches an E element that is the only sibling of its type3 E:only-of-typeStructural pseudo-classesMatches an E element that is the only sibling of its type3 E:emptyStructural pseudo-classesMatches an E element that has no children including text nodes3 E:linkThe link pseudo-classesMatches an E element being the source anchor of a hyperlink of which the target is not yet visited1 E:visitedThe link pseudo-classesMatches an E element being the source anchor of a hyperlink of which the target was already visited1 E:activeThe user action pseudo-classesMatches an E element that is clicked by the user1 E:hoverThe user action pseudo-classesMatches an E element while the mouse is over it2 E:focusThe user action pseudo-classesMatches an E element that has focus2 E:targetThe target pseudo-classMatches an E element being the target of the referring URI3 E:lang(en)The :lang() pseudo-classMatches an E element that is in lang "en"2 E:enabledThe UI element states pseudo-classesMatches an E user interfacing element with enabled state3 E:disabledThe UI element states pseudo-classesMatches an E user interfacing element with disable state3 E:checkedThe UI element states pseudo-classesMatches an E user interfacing element which is checked, for instance a radio-button or checkbox.3 E.clsClass selectorsMatches an E element with the 'class' attribute having a 'cls' value in the whitespace-separated list.1 E[class~=cls]Class selectorsMatches an E element with a 'class' attribute having a 'cls' value in the whitespace-separated list.1 E#myidID selectorsMatches an E element with a 'id' equal to 'myid'.1 E:not(s)Negation pseudo-classMatches an E element that does not match simple selector s.3

The form of Element Tag

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

ExpressionDescrioptionMeaningLvl *Universal selectorMatches any element2 EType selectorMatches any E element, that is select an element tag of type E1 E:first-lineThe ::first-line pseudo-elementMatches the first line of an E element1 E::first-lineThe ::first-line pseudo-elementMatches the first line of an E element3 E:first-letterThe ::first-letter pseudo-elementMatches the first letter of an E element1 E::first-letterThe ::first-letter pseudo-elementMatches the first letter of an E element3 E:beforeThe ::before pseudo-elementMatches the generated content before an E element2 E::beforeThe ::before pseudo-elementMatches the generated content before an E element3 E:afterThe ::after pseudo-elementMatches the generated content after an E element2 E::afterThe ::after pseudo-elementMatches the generated content after an E element3

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.

Simple selectorA simple selector is a direct element selector with optional pseudo-element. '*', 'p', 'p::first-letter', 'p::before' Compound selectorA compound selector is a direct element selector with specific criteria. 'p[att]', 'p[att="val"]', 'p:first-child', 'p:first-child:first-of-type', 'p:first-child:first-of-type::first-line' Complex selectorA complex selector is an indirect element selector with reference to one or more other selectors separated by combinators. 'div p', 'div + p', 'div > p', 'div ~ p', 'div + p + p', 'div p + p', 'div p + p:first-child:first-of-type::first-line' Grouped selectorA grouped selector is a collection of selectors of any kind. 'div p , div + p', 'div > p , div ~ p', 'div + p + p, 'div p + p, div p + p:first-child:first-of-type::first-line'

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.

highest specificityAn inline selector used to specify an element. e.g. inline style high specificityA unique selector used to specify only one element. e.g. ID selector less specificityA specific selector used to specify one or more elements. e.g. class selectors, attribute selectors, pseudo-classes least specificityA general selector used to specify no element specifically. e.g. type selectors, pseudo-elements no specificityA dummy selector used to match any element have least specificity. e.g. universal selector, pseudo-elements

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

HTML Document Input:
<!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>
HTML Web Page Embedded Output:

not support


©sideway
close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

ID: 190400010 Last Updated: 2019/4/10 Revision: Ref:

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (335)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (554)new

CSS (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (368)

MS Windows

Windows10 (SC)

DeskTop (6)

Knowledge

Mathematics

Formulas (8)

Number Theory (206)

Algebra (17)

Trigonometry (18)

Geometry (18)

Calculus (67)

Complex Analysis (13)new

Engineering

Tables (8)

Mechanical

Mechanics (1)

Rigid Bodies

Statics (92)

Dynamics (37)

Fluid (5)

Fluid Kinematics (5)

Control

Process Control (1)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)

Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019