Cascading Styles and Selectors - HTML, CSS, and Dynamic HTML - page 1082

Selectors
The general form of a style declaration is:

selector { attribute1 : value1 ; attribute2 : value2 ; ...}

where selector is the selection of elements within the document to which the style
will be applied; attribute1 , attribute2 , etc. are the different style attributes; and value1 ,
value2 , etc. are values associated with those styles. The following table shows some of
the different forms that a selector can take.

Selector Matches

*

All elements in the document

e

An element, e , in the document

e1 , e2 , e3 , …

A group of elements, e1 , e2 , e3 , in the document

e1 e2

An element e2 nested within the parent element, e1

e1 > e2

An element e2 that is a child of the parent element, e1

e1 + e2

An element, e2 , that is adjacent to element e1

e1.class

An element, e1 , belonging to the class class

.class

Any element belonging to the class class

# id

An element with the id value id

[ att ]

The element contains the att attribute

[ att =” val ”]

The element's att attribute equals “ val ”

[ att ~=” val ”]

The element's att attribute value is a space-separated list of “words,” one of
which is exactly “ val ”

[ att |=” val ”]

The element's att attribute value is a hyphen-separated list of “words” beginning
with “val”

[ att ^=” val ”]

The element's att attribute begins with “ val ” (CSS3)

[ att $=” val ”]

The element's att attribute ends with “ val ” (CSS3)

[ att *=” val ”]

The element's att attribute contains the value “ val ” (CSS3)

[ ns | att ]

References all att attributes in the ns namespace (CSS3)

Pseudo-Elements and Pseudo-Classes
Pseudo-elements are elements that do not exist in HTML code but whose attributes can
be set with CSS. Many pseudo-elements were introduced in CSS2.

Pseudo-Element Matches

e :after {content: “ text ”}

Text content, text , that is inserted at the end of an element, e

e :before {content: “ text ”}

Text content, text , that is inserted at the beginning of an
element, e

e :first-letter

The first letter in the element e

e :first-line

The first line in the element e

::selection

A part of the document that has been highlighted by the
user (CSS3)