Periodic Table of CSS3 Grammar

Introduction:

The table below shows a summary of the grammar of the current CSS3 specification, as published by the W3C in April 2012. The entries are grouped and coloured based on their usage. 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, and the Periodic Table of CSS syntax, and .

Box-Model

Text

Background

Display

Table

Lists

Page - Based

Visual Formatting

Layout / Position

Pseudo Stuff

box-sizing

Usage:
content-box
padding-box
border-box

box-decoration-break

Usage:
slice
clone

border

Usage:
border-width
border-style
border-color
inherit

border-bottom

Usage:
border-width
border-style
border-color
inherit

content

Usage:
normal
none
string
uri
counter
attr()
open-quote
close-quote
no-open-quote
no-close-quote
inherit

border-bottom-color

Usage:
color
inherit

border-bottom-right-radius

Usage:
length
percentage
length length
percentage percentage

border-bottom-left-radius

Usage:
length
percentage
length length
percentage percentage

border-bottom-style

Usage:
border-style
inherit

border-bottom-width

Usage:
border-width
inherit

::after (:after)

Usage:
Creates a pseudo-element that is the last child of the element matched.

border-color

Usage:
color
inherit

::before (:before)

Usage:
Creates a pseudo-element that is the first child of the element matched.

border-image

Usage:
none
image
‘border-image-slice’
stretch
repeat
round
space

::choices

Usage:
This pseudo-element styles a list of options associated with a form element irrespective of the styling of its label, such as a list of radio buttons.

border-image-outset

Usage:
length

::first-letter (:first-letter)

Usage:
This CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

border-image-repeat

Usage:
stretch
repeat
round
space
inherit

::first-line (:first-line)

Usage:
This pseudo-element applies styles only to the first line of a element.

border-image-slice

Usage:
number{1,4}
percentage{1,4}

::repeat-index

Usage:
This pseudo-element takes the place of the ::repeat-item rather than being nested inside as a separate element.

border-image-source

Usage:
none
image
linear-gradient()
inherit

top

Usage:
length
percentage
auto
inherit

::repeat-item

Usage:
This pseudo-element represents a single item from a repeating sequence.

border-image-width

Usage:
length
percentage
number
auto
inherit

font

Usage:
font-style
font-variant
font-weight
font-size
/
font-family

right

Usage:
length
percentage
auto
inherit

::selection

Usage:
This non-standard pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.

border-left

Usage:
border-width
border-style
border-color
inherit

@font-face

Usage:
font-family: font-name
src: source
font-weight: weight
font-style: style

bottom

Usage:
length
percentage
auto
inherit

::value

Usage:
This pseudo-element selects the representation of just the data value of a form element, in order to style its appearance.

border-left-color

Usage:
color
inherit

font-family

Usage:
family-name
serif
sans-serif
cursive
fantasy
monospace
inherit

left

Usage:
length
percentage
auto
inherit

:checked

Usage:
This pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select> ) element that is checked or toggled to an on state.

border-left-style

Usage:
border-style
inherit

font-feature-settings

Usage:
normal
quoted list of OpenType feature tag-value pairs

position

Usage:
static
relative
absolute
fixed
inherit

:default

Usage:
This pseudo-class represents any user interface element that is the default among a group of similar elements.

border-left-width

Usage:
border-width
inherit

font-kerning

Usage:
auto
normal
none

float

Usage:
left
right
none
inherit

:disabled

Usage:
This pseudo-class represents any disabled element.

border-radius

Usage:
length{1,4}
percentage{1,4}
inherit

font-language-override

Usage:
normal
inherit
string

clear

Usage:
none
left
right
both
inherit

:empty

Usage:
This pseudo-class represents any element that has no children at all.

border-right

Usage:
border-width
border-style
border-color
inherit

font-size

Usage:
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
percentage
inherit

height

Usage:
length
percentage
auto
inherit

:enabled

Usage:
This pseudo-class represents any enabled element.

border-right-color

Usage:
color
inherit

font-size-adjust

Usage:
number
none
inherit

width

Usage:
length
percentage
auto
inherit

:first

Usage:
This pseudo-class describes the styling of the first page when printing a document.

border-right-style

Usage:
border-style
inherit

font-stretch

Usage:
inherit
ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded

color

Usage:
color
inherit

clip

Usage:
shape
auto
inherit

:first-child

Usage:
This pseudo-class represents any element that is the first child element of its parent.

border-right-width

Usage:
border-width
inherit

font-style

Usage:
normal
italic
oblique
inherit

cursor

Usage:
uri
x y
auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
e-resize
n-resize
ne-resize
nw-resize
s-resize
se-resize
sw-resize
w-resize
ew-resize
ns-resize
nesw-resize
nwse-resize
col-resize
row-resize
all-scroll
inherit

clip-path

Usage:
uri
none
inherit

:first-of-type

Usage:
This pseudo-class represents the first sibling of the given type in the list of children of its parent element.

border-style

Usage:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

font-variant

Usage:
normal
small-caps
inherit

box-shadow

Usage:
none
inset
offset-x
offset-y
blur-radius
spread-radius
color

overflow

Usage:
visible
hidden
scroll
auto
inherit

:focus

Usage:
This pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

border-top

Usage:
border-width
border-style
border-color
inherit

font-variant-ligatures

Usage:
normal
inherit
common-lig-values
discretionary-lig-values
historical-lig-values

transform

Usage:
transform-function
none

overflow-x

Usage:
visible
hidden
scroll
auto

:indeterminate

Usage:
This pseudo-class represents any elements in an indeterminate state.

border-top-color

Usage:
color
inherit

font-weight

Usage:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit

transform-origin

Usage:
percentage
length
left
center
right
percentage
length
top
center
bottom

overflow-y

Usage:
visible
hidden
scroll
auto

:in-range

Usage:
This pseudo-class applies only to elements that have range limitations.

border-top-left-radius

Usage:
length
percentage
length length
percentage percentage

letter-spacing

Usage:
normal
length

transform-style

Usage:
preserve-3d
flat

overflow-wrap

Usage:
The word-wrap property has been renamed overflow-wrap in latest drafts of the CSS3 Text specification
normal
break-word

:invalid

Usage:
This pseudo-class represents any <input> element whose content fails to validate according to the input's type setting.

border-top-right-radius

Usage:
length
percentage
length length
percentage percentage

line-height

Usage:
normal
number
length
percentage

animation

Usage:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

resize

Usage:
none
both
horizontal
vertical
inherit

:lang

Usage:
This pseudo-class matches elements based on the language the element is determined to be in.

border-top-style

Usage:
border-style
inherit

tab-size

Usage:
integer
inherit

animation-delay

Usage:
time

table-layout

Usage:
inherit
auto
fixed

:last-child

Usage:
This pseudo-class represents any element that is the last child element of its parent.

border-top-width

Usage:
border-width
inherit

text-align

Usage:
left
center
right
justify
start
end
-moz-left
-moz-center
-moz-right
inherit

animation-direction

Usage:
normal
alternate

vertical-align

Usage:
baseline
sub
super
text-top
text-bottom
middle
top
bottom
percentage
length
inherit

:last-of-type

Usage:
This pseudo-class represents the last sibling of the given type in the list of children of its parent element.

border-width

Usage:
width
horizontal vertical
top vertical bottom
top right bottom left
inherit

text-align-last

Usage:
auto
start
end
left
right
center
justify
inherit

animation-duration

Usage:
time

z-index

Usage:
auto
integer
inherit

:left

Usage:
This pseudo-class matches any left-hand page when printing a page.

margin

Usage:
length{1,4}
percentage{1,4}
inherit
auto

text-decoration

Usage:
none
underline
overline
line-through
blink
inherit

animation-fill-mode

Usage:
none
forwards
backwards
both

columns

Usage:
column-count
column-width

:not

Usage:
This pseudo-class matches an element that is not represented by the argument.

margin-bottom

Usage:
length
percentage
inherit
auto

text-decoration-color

Usage:
color
inherit

animation-iteration-count

Usage:
infinite
number

column-count

Usage:
integer
auto

:nth-child

Usage:
This pseudo-class matches an element that has n-1 siblings before it in the document tree.

margin-left

Usage:
length
percentage
inherit
auto

text-decoration-line

Usage:
none
underline
overline
line-through

animation-name

Usage:
none
name

column-fill

Usage:
auto
balance

:nth-last-child

Usage:
This pseudo-class matches an element that has n-1 siblings after it in the document tree

margin-right

Usage:
length
percentage
inherit
auto

text-decoration-style

Usage:
inherit
solid
double
dotted
dashed
wavy

animation-play-state

Usage:
running
paused

column-gap

Usage:
length
normal

:nth-last-of-type

Usage:
This pseudo-class matches an element that has n-1 siblings with the same element name after it in the document tree

margin-top

Usage:
length
percentage
inherit
auto

text-indent

Usage:
length
percentage
hanging
each-line

animation-timing-function

Usage:
timing-function

column-rule

Usage:
column-rule-width
column-rule-style
column-rule-color
transparent

:nth-of-type

Usage:
This pseudo-class matches an element that has n-1 siblings with the same element name before it in the document tree

outline

Usage:
outline-width
outline-style
outline-color
inherit

text-overflow

Usage:
inherit
overflow-type

transition

Usage:
transition-property
transition-duration
transition-timing-function
transition-delay

column-rule-color

Usage:
color
inherit

:only-child

Usage:
This pseudo-class represents any element which is the only child of its parent.

outline-color

Usage:
color
inherit

text-rendering

Usage:
auto
optimizeSpeed
optimizeLegibility
geometricPrecision
inherit

background

Usage:
background-color
background-image
background-repeat
background-attachment
background-position
inherit

break-after

Usage:
auto
always
avoid
left
right
page
column
avoid-page
avoid-column

transition-delay

Usage:
time

column-rule-style

Usage:
border-style

:only-of-type

Usage:
This pseudo-class represents any element that has no siblings of the given type.

outline-offset

Usage:
length
inherit

text-shadow

Usage:
none
color
offset-x
offset-y
blur-radius

background-attachment

Usage:
scroll
fixed
local

break-before

Usage:
auto
always
avoid
left
right
page
column
avoid-page
avoid-column

transition-duration

Usage:
time

column-rule-width

Usage:
border-width

:optional

Usage:
This pseudo-class represents any <input> element that does not have the required attribute set on it.

outline-style

Usage:
auto
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

text-transform

Usage:
none
capitalize
uppercase
lowercase
full-width
full-size-kana

background-clip

Usage:
border-box
padding-box
content-box

counter-increment

Usage:
identifier integer
inherit
none

break-inside

Usage:
auto
avoid
avoid-page
avoid-column

transition-property

Usage:
none
all
property-name

column-span

Usage:
none
all

:out-range

Usage:
This pseudo-class applies only to elements that have range limitations.

outline-width

Usage:
thin
medium
thick
length
inherit

quotes

Usage:
open-quote close-quote
none
inherit

background-color

Usage:
color
inherit

counter-reset

Usage:
identifier integer
inherit
none

page-break-after

Usage:
auto
always
avoid
left
right
inherit

transition-timing-function

Usage:
timing-function

column-width

Usage:
length
auto

:read-only

Usage:
This pseudo-element is provided as a way to style user interface fragments that are user-alterable

padding

Usage:
length{1,4}
percentage{1,4}

unicode-bidi

Usage:
normal
embed
isolate
bidi-override
plaintext
inherit

background-image

Usage:
image
none

display

Usage:
none
inline
block
list-item
inline-block
table
inline-table
table-caption
table-column
table-colgroup
table-header-group
table-row-group
table-footer-group
table-row
table-cell
flexbox
inline-flexbox
grid
inline-grid
run-in

list-style

Usage:
list-style-type
list-style-position
list-style-image

page-break-before

Usage:
auto
always
avoid
left
right
inherit

image-rendering

Usage:
auto
inherit
optimizeSpeed
optimizeQuality
-moz-crisp-edges
-o-crisp-edges

max-height

Usage:
length
percentage
none
inherit

:read-write

Usage:
This pseudo-element is provided as a way to style user interface fragments that are user-alterable

padding-bottom

Usage:
length
percentage
inherit

word-spacing

Usage:
normal
length

background-origin

Usage:
padding-box
border-box
content-box

opacity

Usage:
number
inherit

border-collapse

Usage:
collapse
separate
inherit

list-style-image

Usage:
uri
none
inherit

page-break-inside

Usage:
auto
avoid
inherit

image-resolution

Usage:
from-image
resolution
snap

max-width

Usage:
length
percentage
none
-moz-max-content
-moz-min-content
-moz-fit-content
-moz-available

:required

Usage:
This pseudo-class represents any <input> element that has the required attribute set on it.

padding-left

Usage:
length
percentage
inherit

word-wrap

Usage:
normal
break-word

background-position

Usage:
percentage
length
left
center
right
inherit
top
bottom

visibility

Usage:
visible
hidden
collapse
inherit

border-spacing

Usage:
length
horizontal vertical
inherit

list-style-position

Usage:
inside
outside
inherit

marks

Usage:
crop
cross
none

image-orientation

Usage:
angle

min-height

Usage:
length
percentage
inherit

:right

Usage:
This pseudo-class matches any right-hand page when printing a page.

padding-right

Usage:
length
percentage
inherit

direction

Usage:
ltr
rtl
inherit

background-repeat

Usage:
repeat-x
repeat-y
repeat
space
round
no-repeat

backface-visibility

Usage:
visible
hidden

caption-side

Usage:
top
bottom
left
right
inherit

list-style-type

Usage:
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-alpha
lower-latin
upper-alpha
upper-latin
armenian
georgian
none

orphans

Usage:
integer
inherit

perspective

Usage:
none
depth

min-width

Usage:
length
percentage
-moz-max-content
-moz-min-content
-moz-fit-content
-moz-available

:root

Usage:
This pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the element

padding-top

Usage:
length
percentage
inherit

hyphens

Usage:
none
manual
auto

background-size

Usage:
contain
cover
length
length length
auto

mask

Usage:
uri
none
inherit

empty-cells

Usage:
show
hide
inherit

marker-offset

Usage:
length

widows

Usage:
number
The minimum number of lines that can stay alone on the top of a new page

perspective-origin

Usage:
left
center
right
top
bottom
length

white-space

Usage:
normal
pre
nowrap
pre-wrap
pre-line
inherit

:valid

Usage:
pseudo-class represents any <input> element whose content validates correctly according to the input's type setting.

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