Selectors

In order to make CSS more flexible and simple to apply, a number of patterns are provided for manipulating CSS rules.

Universal selector CSS2.1

This is a styling method to redefine any element. e.g. any element

* { color: blue }

Type Selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements. e.g. h2

h2 { color: blue }

Descendant selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that is a descendant of another element. e.g. em, nested anywhere within  h2,

h2 em { color: blue }

Child selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that is a child of another element. e.g. em, nested as a child within h2,

h2 > em { color: blue }

Adjacent selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that immediately follow another element, and both elements share the same parent. e.g. h2 follows h1 within body,

h1 + h2 { color: blue }

Attribute selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that match the specified attribute conditions.

h1[title] { color: blue }
h1[title="example"] { color: blue }
h1[title~="example"] { color: blue }
h1[lang|="en"] { color: blue }
h1[title="example"][lang|="en"] { color: blue }

Class Selectors CSS2.1

This is a styling method used in HTML to redefine the presentation style of existing elements that match the specified class attribute conditions.

.head1 { color: blue }
*.head1 { color: blue }
h1.heat1 { color: blue }
h1.heat.blue { color: blue }

ID Selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that match the specified id attribute conditions.

h1#titleid { color: blue }

Pseudo-Class CSS2.1

This is a styling method to redefine the presentation style of existing elements that match the specified  state.

p:first-child { color: blue }
*>p:first-child { color: blue }
h1>p:first-child { color: blue }
:link { color: blue }
a:link { color: blue }
:visited { color: blue }
a:visited { color: blue }
a.head1:visited { color: blue }
a:hover { color: blue }
a:active { color: blue }
a:focus { color: blue }
a:focus:hover { color: blue }
html:lang(fr) { color: blue }
:lang(fr) { color: blue }
:lang(fr) > h1{ color: blue }

Pseudo-Element CSS2.1

This is a styling method to redefine the presentation style of existing elements that match the specified part of an element.

p:first-line { color: blue }
p:first-letter { color: blue }
p:before { color: blue }
p:after { color: blue }

CSS Standard

CSS References..........

• HTML 4.01 Specification (1999-12-24)
• Cascading Style Sheets (CSS1) Level 1 Specification (2008-04-11)
• Cascading Style Sheets, level 2 CSS2 Specification (2008-04-11)
• Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (2008-09-08)