CSS Selectors select the elements (aka subjects, tags, objects) upon which the CSS Rules are applied.

The basic unit of a selector is the Simple Selector. A simple selector is either a Type Selector (EG: p) or a Universal Selector (*) followed immediately by zero or more Attribute Selectors (EG: p[href="http://www.fake.com/"]), ID Selectors (EG: p#myDiv), Pseudo-Classes (EG: p:first-child), or Pseudo-Elements (EG: p:first-line), in any order. If a simple selector lacks either a type or universal, but it has the second part, then a universal selector is assumed (EG: *.myClass is the same as .myClass).

Selector Pattern Meaning
Universal * Matches any element.
Type E Type selector: Matches any E element (i.e., an element of type E).
Pseudo-Classes E:first-child Matches element E when E is the first child of its parent.

EG: div > p:first-child

<p>No match<p>
<div>
   <p>Match</p>
   <p>No match</p>
</div>
<div>
   <h1>No Match</h1>
   <p>No match</p>
</div>
E:link
E:visited		 Matches element E if the source anchor's target has not been visited (:link) or has already been visited (:visited). These pseudo-classes are mutually exclusive. In HTML this E is always an a element, so a:link, *:link, and :link are equivalent.
E:active
E:hover
E:focus		 Matches element E during certain user actions that are not mutually exclusive. Sometimes 2 of these pseudo-classes are combined (EG: a:focus:hover).
  • :focus when the link has acquired the focus (usu. via keyboard). Not in MS.
  • :hover when the link is designated but not activated (usu. while hovering over with a mouse).
  • :active when the link is being activated (usu. while clicking).

For the link pseudo-classes to work, they should be applied in order: "LoVe-HAte", i.e. :link, :visited, :hover, and then :active.
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). EG: :lang(fr) > q.
Pseudo-Elements E:first-line Matches the first line displayed of a block element E. Only certain CSS properties can be applied to a first-line pseudo element: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', and 'clear'.
E:first-letter Matches the first letter displayed of a block element E. Only certain CSS properties can be applied to a first-letter pseudo element: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (only if 'float' is 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow', and 'clear'.
E:before { content:MyContent }
E:after { content:MyContent }		 The :before and :after pseudo-elements can be used to insert generated content before or after an element's content. Not in MS. EG: h1:before{content:"CHAPTER"}.
Attribute E[foo] Matches any E element with the foo attribute set.
E[foo][bar] EG: Matches any E element with the foo and bar attributes set.
E[foo="SomeValue"] Matches any E element whose foo attribute has a value exactly equal to SomeValue.
E[foo|="SomeValue"] Matches any E element whose foo attribute has a hyphen-separated list of values beginning (from the left) with SomeValue.
E[foo~="SomeValue"] Matches any E element whose foo attribute value is a list of space-separated values, one of which is exactly equal to SomeValue.
E.SomeClass HTML only. The same as E[class~="SomeClass"].
E.dog.hound EG: Matches any E element whose class attribute has a dog value and a hound value. This it would match class="dog hound" or even class="dog male hound".
ID E#MyID Matches any E element whose id attribute is equal to MyID.

A Selector is a chain of one or more simple selectors separated by Combinators. Combinators are: whitespace, >, and +. Whitespace may appear between a Combinator and the Simple Selectors around it.

Selector Pattern Meaning
Descendant E F Matches any F element that is a descendant of an E element.
E * F EG: Matches any F element that is a grandchild or lower descendant of an E element.
Child E > F Matches any F element that is a child of an element E.
Adjacent Sibling E + F Matches any F element immediately preceded by an element E, and the have the same parent.

When the same set of declarations applies to multiple selectors, then the selectors may be grouped as a comma delimited list. EG: h1,h2{color:red}.

EGs

EG1

This example shows how to put horizontal rules between the rows of a table. This implements the rules attribute of the table HTML element.

#myTable{border:none; border-collapse:collapse;}
#myTable[rules=rows] TR{border-top:solid}
top row
middle row
bottom row

EG2

This example makes a drop cap (aka initial cap).

p.test:first-letter{
    font:italic bold 200% serif; 
    float:left; 
    padding-right:5px; 
    text-transform:uppercase;
}

This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.

Page Modified: (Hand noted: 2005-11-26 10:22:21Z) (Auto noted: 2007-11-17 06:48:26Z)