Periodic Table of CSS3 Syntax

Introduction:

The table below shows a summary of the syntax of the current CSS3 specification, as published by the W3C in April 2012. The entries are grouped and coloured based on their atributes. Unlike Mendelev's Periodic Table that is used in Chemistry, there is no fundamental ordering to the elements within a group, and no significance to the presence of a few empty spaces. This table is a companion to the Periodic Table of the HTML5 elements.

Colours

currentColor

Value:
Inherited from context

Units

black

Hex:
#000000
RGB:
0,0,0

em

Type:
LENGTH

silver

Hex:
#C0C0C0
RGB:
192,192,192

ex

Type:
LENGTH

gray

Hex:
#808080
RGB:
128,128,128

px

Type:
LENGTH

white

Hex:
#FFFFFF
RGB:
255,255,255

cm

Type:
LENGTH

Selectors

maroon

Hex:
#800000
RGB:
128,0,0

mm

Type:
LENGTH

*

Category:
Universal selector
Meaning:
Any element

red

Hex:
#FF0000
RGB:
255,0,0

in

Type:
LENGTH

E

Category:
Type selector
Meaning:
An element of type E

E:root

Category:
Structural pseudo-classes
Meaning:
An E element, root of the document

Media Types

Media Features

purple

Hex:
#800080
RGB:
128,0,128

pt

Type:
LENGTH

E[foo]

Category:
Attribute selectors
Meaning:
An E element with a "foo" attribute

E:nth-child(n)

Category:
Structural pseudo-classes
Meaning:
An E element, the n-th child of its parent

all

Meaning:
Suitable for all devices.

scan

Meaning:
Describes the scanning process of television output devices.
Values:
progressive | interlace

grid

Meaning:
Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1, otherwise it is zero.
Values:
1 | 0

fuchsia

Hex:
#FF00FF
RGB:
255,0,255

pc

Type:
LENGTH

E[foo="bar"]

Category:
Attribute selectors
Meaning:
An E element whose "foo" attribute value is exactly equal to "bar"

E:nth-last-child(n)

Category:
Structural pseudo-classes
Meaning:
An E element, the n-th child of its parent, counting from the last one

aural

Type:
Intended for speech synthesizers. Replaced in CSS3 with "speech".

width

Meaning:
Describes the width of the rendering surface of the output device
Values:
length

min-width

Meaning:
Describes the width of the rendering surface of the output device
Values:
length

max-width

Meaning:
Describes the width of the rendering surface of the output device
Values:
length

green

Hex:
#008000
RGB:
0,128,0

%

Type:
LENGTH

E[foo~="bar"]

Category:
Attribute selectors
Meaning:
An E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

E:nth-of-type(n)

Category:
Structural pseudo-classes
Meaning:
An E element, the n-th sibling of its type

braille

Type:
Intended for braille tactile feedback devices.

height

Meaning:
Describes the height of the output device's rendering surface
Values:
length

min-height

Meaning:
Describes the height of the output device's rendering surface
Values:
length

max-height

Meaning:
Describes the height of the output device's rendering surface
Values:
length

lime

Hex:
#00FF00
RGB:
0,255,0

deg

Type:
ANGLE

E[foo^="bar"]

Category:
Attribute selectors
Meaning:
An E element whose "foo" attribute value begins exactly with the string "bar"

E:nth-last-of-type(n)

Category:
Structural pseudo-classes
Meaning:
An E element, the n-th sibling of its type, counting from the last one

E:empty

Category:
Structural pseudo-classes
Meaning:
An E element that has no children (including text nodes)

At-rules

handheld

Type:
Intended for handheld devices (typically small screen, limited bandwidth).

device-width

Meaning:
Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Values:
length

min-device-width

Meaning:
Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Values:
length

max-device-width

Meaning:
Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Values:
length

olive

Hex:
#808000
RGB:
128,128,0

rad

Type:
ANGLE

E[foo$="bar"]

Category:
Attribute selectors
Meaning:
An E element whose "foo" attribute value ends exactly with the string "bar"

E:first-child

Category:
Structural pseudo-classes
Meaning:
An E element, first child of its parent

E:link

Category:
The link pseudo-classes
Meaning:
An E element being the source anchor of a hyperlink of which the target is not yet visited

Functions

@import

Type:
Allows the importation of style rules from other style sheets. These rules must precede all other types of rules, except for @charset rules

print

Type:
Intended for paged material and for documents viewed on screen in print preview mode.

device-height

Meaning:
Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Values:
length

min-device-height

Meaning:
Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Values:
length

max-device-height

Meaning:
Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Values:
length

yellow

Hex:
#FFFF00
RGB:
255,255,0

grad

Type:
ANGLE

E[foo*="bar"]

Category:
Attribute selectors
Meaning:
An E element whose "foo" attribute value contains the substring "bar"

E:last-child

Category:
Structural pseudo-classes
Meaning:
An E element, last child of its parent

E:visited

Category:
The link pseudo-classes
Meaning:
An E element being the source anchor of a hyperlink of which the target is already visited

E F

Category:
Descendant combinator
Meaning:
An F element descendant of an E element

E:enabled

Category:
The UI element states pseudo-classes
Meaning:
A user interface element E which is enabled

E::first-line

Category:
The ::first-line pseudo-element
Meaning:
The first formatted line of an E element

Keywords

attr

Type:
Used to retrieve the value of an HTML element's attribute

@page

Type:
Used to modify certain specific CSS properties when printing a document

projection

Type:
Intended for projected presentations.

device-aspect-ratio

Meaning:
Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).
Values:
ratio => length/length

min-device-aspect-ratio

Meaning:
Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).
Values:
ratio => length/length

max-device-aspect-ratio

Meaning:
Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).
Values:
ratio => length/length

navy

Hex:
#000080
RGB:
0,0,128

ms

Type:
TIME

E[hreflang|="foo"]

Category:
Attribute selectors
Meaning:
An a element for which the value of the hreflang attribute begins with "foo"

E:first-of-type

Category:
Structural pseudo-classes
Meaning:
An E element, first sibling of its type

E:active

Category:
The user action pseudo-classes
Meaning:
An E element during certain user actions

E > F

Category:
Child combinator
Meaning:
An F element child of an E element

E:disabled

Category:
The UI element states pseudo-classes
Meaning:
A user interface element E which is disabled

E::first-letter

Category:
The ::first-letter pseudo-element
Meaning:
The first formatted letter of an E element

auto

Type:
Signifies a value that is to be automatically computed by a user agent. The specific effects of auto depend on the property to which it is applied as its value.

url

Type:
Encapsulates a URI / URL describing the location of a required resource, such as an image.

@media

Type:
Associates a set of nested statements, in a CSS block with a condition defined by a media query

screen

Type:
Intended primarily for color computer screens.

color

Meaning:
Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.
Values:
length (Number of bits per colour)

min-color

Meaning:
Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.
Values:
length (Number of bits per colour)

max-color

Meaning:
Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.
Values:
length (Number of bits per colour)

blue

Hex:
#0000FF
RGB:
0,0,255

s

Type:
TIME

E:contains("foo")

Category:
Attribute selectors
Meaning:
An E element whose attribute value contains "foo"

E:last-of-type

Category:
Structural pseudo-classes
Meaning:
An E element, last sibling of its type

E:hover

Category:
The user action pseudo-classes
Meaning:
An E element during certain user actions

E + F

Category:
Adjacent sibling combinator
Meaning:
An F element immediately preceded by an E element

E:checked

Category:
The UI element states pseudo-classes
Meaning:
A user interface element E which is checked (for instance a radio-button or checkbox)

E::selection

Category:
The ::selection pseudo-element
Meaning:
Text selected by the user

none

Type:
Often the default value, and can be considered as a sort of "standard" value. It is comparable to the value "normal", used in a similar manner for other properties.

rgb / rgba

RGB:
Encapsulates three integer or three percentage values to define a colour.
RGBA:
Encapsulates three integer and one decimal value; or three percentage values and one decimal value, to define a colour.

@font-face

Type:
Enables authors to specify online fonts to display text on their web pages

tty

Type:
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).

color-index

Meaning:
The number of entries in the color look-up table for the output device.
Values:
integer

min-color-index

Meaning:
The number of entries in the color look-up table for the output device.
Values:
integer

max-color-index

Meaning:
The number of entries in the color look-up table for the output device.
Values:
integer

teal

Hex:
#008080
RGB:
0,128,128

Hz

Type:
FREQUENCY

E:not(s)

Category:
Negation pseudo-class
Meaning:
An E element that does not match simple selector s

E:only-child

Category:
Structural pseudo-classes
Meaning:
An E element, only child of its parent

E:focus

Category:
The user action pseudo-classes
Meaning:
An E element during certain user actions

E ~ F

Category:
General sibling combinator
Meaning:
An F element preceded by an E element

E:indeterminate

Category:
The :indeterminate pseudo-class
Meaning:
Elements whose value is in an indeterminate state. For example, radio and checkbox elements can be toggled between checked and unchecked states, but are sometimes in an indeterminate state, neither checked nor unchecked.

E::before

Category:
The ::before pseudo-element
Meaning:
Generated content before an E element

inherit

Type:
Causes the element for which it is specified to take the Computed value of the property from its parent element

calc

Type:
The calc() function can be used anywhere a length is required, to perform calculations to determine the size and shape of objects.

@charset

Type:
Specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character

tv

Type:
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

monochrome

Meaning:
Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.
Values:
integer

min-monochrome

Meaning:
Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.
Values:
integer

max-monochrome

Meaning:
Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.
Values:
integer

aqua

Hex:
#00FFFF
RGB:
0,255,255

kHz

Type:
FREQUENCY

E:lang(fr)

Category:
The :lang() pseudo-class
Meaning:
An element of type E in language "fr" (the document language specifies how language is determined)

E:only-of-type

Category:
Structural pseudo-classes
Meaning:
An E element, only sibling of its type

E:target

Category:
The target pseudo-class
Meaning:
An E element being the target of the referring URI

E#myid

Category:
ID selectors
Meaning:
An E element with ID equal to "myid"

E.warning

Category:
Class selectors
Meaning:
An E element whose class is "warning" (the document language specifies how class is determined)

E::after

Category:
The ::after pseudo-element
Meaning:
Generated content after an E element

initial

Type:
Applies the initial value of a property to an element.

cycle

Type:
Allows you to cycle through different values

@namespace

Type:
Declares the default namespace and binds namespaces to namespace prefixes

embossed

Type:
Used for paged braille printers

resolution

Meaning:
Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).
Values:
resolution => integerdpi|dpcm

min-resolution

Meaning:
Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).
Values:
resolution => integerdpi|dpcm

max-resolution

Meaning:
Indicates the resolution (pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).
Values:
resolution => integerdpi|dpcm

© Copyright Mike Brockington 2004 - 2015   All Rights Reserved   With the exception of details from the current CSS specification.