CSS selectors (pattern matching rules) digest

//=== css selectors and pattern matching

1. * universal selector


2. , group selector


3. [space] descendant selector


4. . class selector


5. > child selector


6. + adjacent sibling selector


7. [att] attribute selector


8. : pseudo-class selector

[examples]

• [group selector] p, h1, h2, h3 { font-family: serif }


• [space, universal, attribute selectors] div p *[href]


• [pseudo-class selector] a:link


• [space, child, space selectors] div ul>li p


• [adjacent sibling selector] h1 + h2 { margin-top: -5mm }


• [class selector] h1.red { color: red }

//=== attribute selectors

[att] Match when the element sets the "att" attribute

[att=val] Match when the element's "att" attribute value is exactly "val".

[att~=val]
Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val".
If "val" contains white space, it will never represent anything.
If "val" is the empty string, it will never represent anything either.

[att=val] Represents an element with the att attribute,
its value either being exactly "val" or
beginning with "val" immediately followed by "-"

[ref]

http://www.w3.org/TR/CSS2/selector.html