Universal

* {color: blue;}

3

Y

Y

Y

Y

Y

Type

div {color: blue;}

3

Y

Y

Y

Y

Y

Descendant

div p {color: blue;}

3

Y

Y

Y

Y

Y

Direct Child

div > p {color: blue;}

3

N

Y

Y

Y

Y

Direct Adjacent Sibling

p + p {color: blue}

3

N

Y

Y

Y

Y

Indirect Adjacent Sibling

p ~ p {color: blue;}

3

N

Y

Y

Y

Y

Attribute Existence

input[type] {color: blue;}

3

N

Y

Y

Y

Y

Attribute's value matches value exactly

input[type=text] {color: blue;}

3

N

Y

Y

Y

Y

Attribute's value is a space-separated list of words, e.g.

rel="copyright copyleft copyeditor"
a[re1~="copyright"] {
 color: blue;
}

3

N

Y

Y

Y

Y

Attribute's value begins with a value or is the value exactly; value provided may be a hyphen-separated list of words, e.g.

hreflang="en-us"
link[hreflang|="en"] {
 color: blue;
}

3

N

Y

Y

Y

Y

Attribute's value begins with...

a[href^=http://www.somesite.com] {
 color: blue;
}

3

N

Y

Y

N

Y

Attribute's value contains...

a[href*=somesite] {
 color: blue;
}

3

N

Y

Y

N

Y

Attribute's value ends with...

a[href$=html] {
 color: blue;
}

3

N

Y

Y

N

Y

Class

div.class {color: blue;}

3

Y

Y

Y

Y

Y

Multiple Classes, e.g.

class="class1class2"
div.classl.class2 {color: blue;}

3

B

Y

Y

Y

Y

IE 6 supports multiple class syntax on the element, but not chaining class selectors in the style sheet.

ID

div#id {color: blue;}

3

Y

Y

Y

Y

Y

:link

3

Y

Y

Y

Y

Y

:visited

3

Y

Y

Y

Y

Y

:hover

3

P

Y

Y

Y

Y

:active

3

P

P

Y

Y

Y

:focus

3

N

N

Y

Y

Y

:target

3

N

N

Y

N

Y

:lang

3

N

N

Y

N

N

:root

3

N

N

Y

N

Y

:first-child

3

N

Y

Y

Y

Y

:last-child

3

N

N

Y

N

Y

:empty

3

N

N

I

N

Y

Mozilla incorrectly applies :empty to elements that contain white space characters.

:not

3

N

N

Y

N

Y

CSS 3 :: (double-colon) syntax.

3

Y

N

Y

Y

Y

::first-line

3

Y

Y

Y

Y

Y

::first-letter

3

Y

Y

Y

Y

Y

::before

3

N

N

Y

Y

Y

::after

3

N

N

Y

Y

Y

::selection

3

N

N

A

N

Y

Mozilla provides a proprietary : : -moz-selection pseudo-element.

color

2.1

Y

Y

Y

Y

Y

Value:

<color>

Initial value:

Depends on browser

Applies to:

All elements

Inherited:

Yes

<color> refers to one of the following.

A color keyword:

body {color: black; }

A hexadecimal value:

body {color: #000000;}

Short hexadecimal value:

body {color: #000;}

RGB value:

body {color: rgb(0, 0, 0);}

RGB percentage:

body {color: rgb(0% ,0%, 0%);}

opacity

3

A

A

I

N

Y

Value:

<alphavalue>

Initial value:

1

Applies to:

All elements

Inherited:

No

Introduced in CSS 3, the opacity property accepts a floating integer between 0.0 (fully transparent) and 1.0 (fully opaque)

Firefox 2.0 incorrectly allows this property to inherit to children elements.

IE 6 and IE 7 provide an alternative, proprietary filter property to achieve a similar effect (see entry for the Microsoft filter property). Mozilla prior to 1.7 provides an alternative proprietary -moz-opacity property (see entry for Mozilla -moz-opacity property).

font-family

2.1

Y

Y

Y

Y

Y

Value:

[[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ]

Initial value:

Varies from browser to browser

Applies to:

All elements

Inherited:

Yes

<family-name> Refers to the name of a font installed on the user's operating system and supported by the browser, for instance: Arial and Times New Roman. A comma-separated list of fonts may be provided, font names containing spaces must be enclosed with quotations.

<generic-family> Refers to fonts not native to a particular operating system and provided by the browser. The following are all of the generic font families:

font-style

2.1

Y

Y

Y

Y

Y

Value:

normal | italic | oblique

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

font-variant

2.1

Y

Y

Y

Y

P

Value:

normal | small-caps

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

Safari 1.2 does not support the small-caps keyword.

font-weight

2.1

Y

Y

Y

Y

Y

Value:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

font-size

2.1

Y

Y

Y

Y

Y

Value:

<absolute-size> | <relative-size> | <length> | <percentage>

Initial value:

medium

Applies to:

All elements

Inherited:

Yes

Percentage value:

Refers to parent element's font size

<absolute-size> refers to one of the keywords:

<relative-size> refers to one of the keywords:

font

2.1

Y

Y

Y

Y

Y

Value:

[[<font-style> || <font-variant> || <font-weight> ]? <font-size> [/ <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

Yes

background-color

2.1

Y

Y

Y

Y

Y

Value:

<color> | transparent

Initial value:

transparent

Applies to:

All elements

Inherited:

No

background-image

2.1

Y

Y

Y

Y

Y

Value:

<uri> | none

Initial value:

none

Applies to:

All elements

Inherited:

No

background-repeat

2.1

Y

Y

Y

Y

Y

Value:

repeat | repeat-x | repeat-y | no-repeat

Initial value:

repeat

Applies to:

All elements

Inherited:

No

background-attachment

2.1

P

Y

Y

Y

Y

Value:

scroll | fixed

Initial value:

repeat

Applies to:

All elements

Inherited:

No

IE 6 only supports the fixed keyword when applied to the <body> element. The fixed keyword may be applied to any element in IE 7.

background-position

3

Y

Y

Y

Y

Y

Value:

[<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ]

Initial value:

0% 0%

Applies to:

All elements

Inherited:

No

Percentage values:

Are determined based on the size of the element itself

background

2.1

Y

Y

Y

Y

Y

Value:

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

No

Percentage values:

Are determined based on the size of the element itself

word-spacing

2.1

Y

Y

Y

Y

Y

Value:

normal | <length>

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

letter-spacing

2.1

Y

Y

Y

Y

Y

Value:

normal | <length>

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

text-decoration

2.1

Y

Y

Y

Y

Y

Value:

none | [underline || overline || line-through || blink ]

Initial value:

none

Applies to:

All elements

Inherited:

No

text-transform

2.1

Y

Y

Y

Y

Y

Value:

capitalize | uppercase | lowercase | none

Initial value:

none

Applies to:

All elements

Inherited:

Yes

text-align

2.1

Y

Y

Y

Y

Y

Value:

left | right | center | justify

Initial value:

left

Applies to:

Block-level elements, table cells and inline blocks

Inherited:

Yes

text-indent

2.1

Y

Y

Y

Y

Y

Value:

<length> | <percentage>

Initial value:

0

Applies to:

Block-level elements, table cells and inline blocks

Inherited:

Yes

Percentage value:

Refers to the width of the containing block

line-height

2.1

Y

Y

Y

Y

Y

Value:

normal | <number> | <length> | <percentage>

Initial value:

normal

Applies to:

All elements

Inherited:

Yes

Percentage value:

Refers to the font size of the element the line-height is applied to

vertical-align

2.1

Y

Y

Y

Y

Y

Value:

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

Initial value:

baseline

Applies to:

Inline-level and 'table-cell' elements

Inherited:

No

Percentage value:

Is determined by the line-height of the element

white-space

2

Y

Y

Y

Y

Y

Value:

normal | pre | nowrap

Initial value:

normal

Applies to:

All elements

Inherited:

Yes.

Internet Explorer 5.5 does not support the pre keyword. IE 6 and IE 7 must be in standards rendering mode for the pre keyword to work.

margin-top

margin-right

margin-bottom

margin-left

2.1

Y

Y

Y

Y

Y

Value:

<length> | <percentage> | auto

Initial value:

0

Applies to:

All elements

Inherited:

No

Percentage value:

Refers to the width of the containing block

margin

2.1

Y

Y

Y

Y

Y

Value:

[<length> | <percentage> | auto ] {1, 4}

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

No

Percentage value:

Refers to the width of the containing block

padding-top

padding-right

padding-bottom

padding-left

2.1

Y

Y

Y

Y

Y

Value:

<length> | <percentage>

Initial value:

0

Applies to:

All elements

Inherited:

No

Percentage value:

Refers to the width of the containing block

padding

2.1

Y

Y

Y

Y

Y

Value:

[ <length> | <percentage> ] {1,4}

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

No

Percentage value:

Refers to the width of the containing block

border-top-width

border-right-width

border-bottom-width

border-left-width

2.1

Y

Y

Y

Y

Y

Value:

thin | medium | thick | <length>

Initial value:

medium

Applies to:

All elements

Inherited:

No

border-width

2.1

Y

Y

Y

Y

Y

Value:

[ thin | medium | thick | <length>] {1,4}

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

No

border-top-color

border-right-color

border-bottom-color

border-left-color

2.1

P

Y

Y

Y

Y

Value:

<color> | transparent

Initial value:

The value of the color property

Applies to:

All elements

Inherited:

No

IE 6 does not support the transparent keyword.

border-color

2.1

P

Y

Y

Y

Y

Value:

[ <color> | transparent ] {1,4}

Initial value:

See individual properties

Applies to:

All elements

Inherited:

No

IE 6 does not support the transparent keyword.

border-top-style

border-right-style

border-bottom-style

border-left-style

2.1

P

P

Y

Y

Y

Value:

none | dotted | dashed | solid | double | groove | ridge | inset | outset

Initial value:

none

Applies to:

All elements

Inherited:

No

IE 5.5 and IE 6 render the dotted keyword as dashed.

border-style

2.1

P

P

Y

Y

Y

Value:

[none | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4}

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

No

IE 5.5 and 6 render the dotted keyword as dashed.

border-top

border-right

border-bottom

border-left

2.1

Y

Y

Y

Y

Y

Value:

<border-width> || <border-style> || <border-color>

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

No

border

2.1

Y

Y

Y

Y

Y

Value:

<border-width> || <border-style> || <border-color>

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

No

width

2.1

I

Y

Y

Y

Y

Value:

<length> | <percentage> | auto

Initial value:

auto

Applies to:

All elements, but non-replaced inline elements, table rows, and row groups

Inherited:

No

IE 6 incorrectly resizes elements if the content inside of the element is larger than its width; this is fixed in IE 7.

min-width

2.1

N

Y

Y

Y

Y

Value:

<length> | <percentage>

Initial value:

0

Applies to:

All elements, but non-replaced inline elements and table elements

Inherited:

No

Versions of Safari previous to 2.0 do not support min-width when applied to positioned elements.

max-width

2.1

N

Y

Y

Y

Y

Value:

<length> | <percentage> | none

Initial value:

none

Applies to:

All elements, but non-replaced inline elements and table elements

Inherited:

No

Versions of Safari previous to 2.0 do not support max-width when applied to positioned elements.

height

2.1

I

Y

Y

Y

Y

Value:

<length> | <percentage> | auto

Initial value:

auto

Applies to:

All elements, but non-replaced inline elements, table rows, and row groups

Inherited:

No

IE 6 incorrectly resizes elements if the content inside of the element is larger than its height.

min-height

2.1

P

Y

Y

Y

Y

Value:

<length> | <percentage>

Initial value:

0

Applies to:

All elements, but non-replaced inline elements, table rows, and row groups

Inherited:

No

IE 6 only supports the min-height property when applied to <td>, <th>, or <tr> elements.

max-height

2.1

N

Y

Y

Y

Y

Value:

<length> | <percentage> | none

Initial value:

none

Applies to:

All elements, but non-replaced inline elements, table rows, and row groups

Inherited:

No

overflow

2.1

I

Y

Y

Y

Y

Value:

visible | hidden | scroll | auto

Initial value:

visible

Applies to:

Block-level and replaced elements

Inherited:

No

IE 6 incorrectly resizes element width / height when overflow: visible; is applied in addition to explicit width or height, and the contents overflow. This is fixed in IE 7.

overflow-x

3

Y

Y

Y

N

N

Value:

visible | hidden | scroll | auto

Initial Value:

visible

Applies to:

Block-level and replaced elements

Inherited:

No

overflow-y

3

Y

Y

Y

N

N

Value:

visible | hidden | scroll | auto

Initial Value:

visible

Applies to:

Block-level and replaced elements

Inherited:

No

clip

2.1

Y

Y

Y

Y

Y

Value:

<shape> | auto

Initial value:

auto

Applies to:

Absolutely positioned elements

Inherited:

No

Under CSS 2 the only valid <shape> value is rect (<top>, <right>, <bottom>, <left>), where rect() provides the dimensions of a rectangle and <top>, <right>, <bottom>, <left> are <length> values.

visibility

2.1

P

P

P

P

P

Value:

visible | hidden | collapse

Initial value:

visible

Applies to:

All elements

Inherited:

Yes

No browser supports the collapse keyword, presumably because it essentially provides the same effect as display: none;

display

2.1

P

P

P

Y

Y

Values:

inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none

Initial value:

inline

Applies to:

All elements

Inherited:

No

IE 5.5 and 6 only support the keywords block, none, inline, inline-block, table-header-group and table-footer-group. IE 6 additionally supports the list-item keyword. Firefox does not support the keywords inline-block, run-in, or compact.

position

2.1

P

Y

Y

Y

Y

Value:

static | relative | absolute | fixed

Initial value:

static

Applies to:

All elements

Inherited:

No

IE 6 does not support the fixed keyword.

top

2.1

Y

Y

Y

Y

Y

Value:

<length> | <percentage> | auto

Initial value:

auto

Applies to:

Positioned elements

Inherited:

No

Percentage value:

Refers to height of containing block

right

2.1

Y

Y

Y

Y

Y

Value:

<length> | <percentage> | auto

Initial value:

auto

Applies to:

Positioned elements

Inherited:

No

Percentage value:

Refers to width of containing block

bottom

2.1

Y

Y

Y

Y

Y

Value:

<length> | <percentage> | auto

Initial value:

auto

Applies to:

Positioned elements

Inherited:

No

Percentage value:

Refers to height of containing block

left

2.1

Y

Y

Y

Y

Y

Value:

<length> | <percentage> | auto

Initial value:

auto

Applies to:

Positioned elements

Inherited:

No

Percentage value:

Refers to width of containing block

top + bottom = height

2.1

N

Y

Y

Y

Y

When both the top and bottom offset properties are applied to an element positioned absolutely or fixed, height is implied.

left + right = width

2.1

N

Y

Y

Y

Y

When both the left and right offset properties are applied to an element positioned absolutely or fixed, width is implied.

float

2.1

Y

Y

Y

Y

Y

Value:

left | right | none

Initial value:

none

Applies to:

All elements

Inherited:

No

clear

2.1

Y

Y

Y

Y

Y

Value:

none | left | right | both

Initial value:

none

Applies to:

Block-level elements

Inherited:

No

z-index

2.1

Y

Y

Y

Y

Y

Value:

auto | <integer>

Initial value:

auto

Applies to:

Positioned elements

Inherited:

No

caption-side

2.1

N

N

Y

N

Y

Value:

top | bottom

Initial value:

top

Applies to:

'table-caption' elements

Inherited:

Yes

table-layout

2.1

Y

Y

Y

Y

Y

Value:

auto | fixed

Initial value:

auto

Applies to:

'table' and 'inline-table' elements

Inherited:

No

border-collapse

2.1

Y

Y

Y

Y

Y

Value:

collapse | separate

Initial value:

separate

Applies to:

'table' and 'inline-table' elements

Inherited:

Yes

border-spacing

2.1

N

N

Y

Y

Y

Value:

<length> <length> ?

Initial value:

0

Applies to:

'table' and 'inline-table' elements

Inherited:

Yes

empty-cells

2.1

N

N

Y

Y

Y

Value:

show | hide

Initial value:

show

Applies to:

'table-cell' elements

Inherited:

Yes

cursor

2.1

Y

Y

Y

Y

P

Value:

[<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ]

Initial value:

auto

Applies to:

All elements

Inherited:

Yes

Safari does not support custom cursors supplied via a <uri>.

outline-width

2.1

N

N

Y

Y

Y

Value:

<border-width>

Initial value:

Medium

Applies to:

All elements

Inherited:

No

outline-style

2.1

N

N

Y

Y

Y

Value:

<border-style>

Initial value:

none

Applies to:

All elements

Inherited:

No

outline-color

2.1

N

N

Y

Y

Y

Value:

<color> | invert

Initial value:

invert

Applies to:

All elements

Inherited:

No

outline

2.1

N

N

Y

Y

Y

Value:

<'outline-color'> || <'outline-style'> || <'outline-width'>

Initial value:

Not defined for shorthand properties

Applies to:

All elements

Inherited:

No

content

2.1

N

N

Y

Y

Y

Value:

normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+

Initial value:

normal

Applies to:

::before and ::after pseudo-elements

Inherited:

No

quotes

2.1

N

N

Y

Y

N

Value:

[<string> <string>]+ | none

Initial value:

Varies from browser to browser

Applies to:

All elements

Inherited:

Yes

counter-reset

2.1

N

N

N

Y

N

Value:

[ <identifier> <integer>? ]+ | none

Initial value:

none

Applies to:

All elements

Inherited:

No

counter-increment

2.1

N

N

N

Y

N

Value:

[ <identifier> <integer>? ]+ | none

Initial value:

none

Applies to:

All elements

Inherited:

No

list-style-type

2.1

P

P

P

P

Y

Value:

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none

Initial value:

disc

Applies to:

Elements with 'display: list-item'

Inherited:

Yes

Firefox does not support the georgian keyword. IE 5.5 and IE 6 only support CSS 1 keyword values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

list-style-image

2.1

Y

Y

Y

Y

Y

Value:

<uri> | none

Initial value:

none

Applies to:

Elements with 'display: list-item'

Inherited:

Yes

list-style-position

2.1

Y

Y

Y

Y

Y

Value:

inside | outside

Initial value:

outside

Applies to:

Elements with 'display: list-item'

Inherited:

Yes

list-style

2.1

P

P

P

P

Y

Value:

<'list-style-type'> || <'list-style-position'> || <'list-style-image'>

Initial value:

Not defined for shorthand properties.

Applies to:

Elements with 'display: list-item'

Inherited:

Yes

size

2.1

N

N

N

Y

N

Value:

<length>{1,2} | auto | portrait | landscape

Initial value:

auto

Applies to:

Page (via @page rule)

marks

2.1

N

N

N

N

N

Value:

[ crop || cross ] | none

Initial value:

none

Applies to:

Page (via @page rule)

page-break-before

2.1

P

P

P

Y

P

Value:

auto | always | avoid | left | right

Initial value:

auto

Applies to:

Block-level elements

IE, Mozilla, and Safari only support the auto and always keywords.

page-break-after

2.1

P

P

P

Y

P

Value:

auto | always | avoid | left | right

Initial value:

auto

Applies to:

Block-level elements

IE, Mozilla, and Safari only support the auto and always keywords.

page-break-inside

2.1

N

N

N

Y

N

Value:

avoid | auto

Initial value:

auto

Applies to:

Block-level elements

page

2.1

N

N

N

N

N

Value:

<identifier> | auto

Initial value:

auto

Applies to:

Block-level elements.

orphans

2.1

N

N

N

Y

N

Value:

<integer>

Initial value:

2

Applies to:

Block-level elements

widows

2.1

N

N

N

Y

N

Value:

<integer>

Initial value:

2

Applies to:

Block-level elements

-khtml-border-radius

?

Value:

<length> <length>?

Initial value:

0

Applies to:

All elements except table elements when border-collapse property is set to collapse

Inherited:

No

-khtml-background-origin

?

Value:

[border | padding | content] [, [border | padding | content]]*

Initial value:

border

Applies to:

All elements

Inherited:

No

-khtml-background-clip

?

Value:

[border | padding] [, [border | padding]]*

Initial value:

border

Applies to:

All elements

Inherited:

No

-khtml-border-image

?

Value:

none | <uri> [<number> | <percentage>]{4}

[ / <border-width>{l,4} ]? [stretch | repeat | round] {0,2}

Initial value:

none

Applies to:

All elements

Inherited:

No

Webkit supports the ability to apply multiple background images to a single element, as per the CSS 3 Backgrounds and Borders Module Working Draft.

background-image

Safari 2.0

Value:

<uri> [ , <uri> ]* | none

Initial value:

none

Applies to:

All elements

Inherited:

No

background-repeat

Safari 2.0

Value:

<repeat> [ , <repeat> ]*

Initial value:

repeat

Applies to:

All elements

Inherited:

No

The value <repeat> stands for: repeat-x | repeat-y | [repeat | space | no-repeat]{1,2}.

background-attachment

Safari 2.0

Value:

scroll | fixed | local [, scroll | fixed | local]*

Initial value:

scroll

Applies to:

All elements

Inherited:

No

background-position

Safari 2.0

Value:

<bg-position> [ , <bg-position> ]*

Initial value:

0% 0%

Applies to:

All elements

Inherited:

No

<bg-position> stands for: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]

background

Safari 2.0

Value:

[ <bg-layer> , ]* <final-bg-layer>

Initial value:

See individual properties

Applies to:

All elements

Inherited:

No

<bg-layer> stands for: <'background-image'> && [ ( <'background-size'> ) ]? && <'background-repeat'>? && <'background-position'>? && <'background-attachment'>? && [ <'background-clip'> <'background-origin'>? ]?

<final-bg-layer> stands for: <'background-image'> || ( <'background-size'> ) || <'background-repeat'> || <'background-position'> || <'background-attachment'> || [ <'background-clip'> <'background-origin'>? ] || <'background-color'>