Title: CSS Snapshot 2015 Shortname: css-2015 Level: 1 Status: NOTE Group: CSSWG Work Status: Exploring URL: https://drafts.csswg.org/css-2015/ TR: https://www.w3.org/TR/CSS Editor: Tab Atkins Jr., Google, http://xanthir.com/ Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact Abstract: This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2015. The primary audience is CSS implementers, not CSS authors, as this definition includes modules by specification stability, not Web browser adoption rate.
Note, though, that the CSSWG must still be consulted to ensure coordination across vendors and to ensure sanity review by the CSS experts from each vendor. Note also that rough interoperability still usually means painful lack of interop in edge (or not-so-edge) cases, particularly because details have not been ironed out through the standards review process.
When exposing such an unstable feature to the Web in a production release,
implementations should support both prefixed and unprefixed syntaxes
for the feature.
Once the feature has stabilized and the implementation is updated to match interoperable behavior,
support for the prefixed syntax should be removed.
Why?
This is recommended so that authors can use the unprefixed syntax to target all implementations,
but when necessary, can target specific implementations
to work around incompatibilities among implementations
as they get ironed out through the standards/bugfixing process.
Pattern | Meaning | Described in section | First defined in level |
---|---|---|---|
* | any element | Universal selector | 2 |
E | an element of type E | Type selector | 1 |
E[foo] | an E element with a "foo" attribute | Attribute selectors | 2 |
E[foo="bar"] | an E element whose "foo" attribute value is exactly equal to "bar" | Attribute selectors | 2 |
E[foo~="bar"] | an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" | Attribute selectors | 2 |
E[foo^="bar"] | an E element whose "foo" attribute value begins exactly with the string "bar" | Attribute selectors | 3 |
E[foo$="bar"] | an E element whose "foo" attribute value ends exactly with the string "bar" | Attribute selectors | 3 |
E[foo*="bar"] | an E element whose "foo" attribute value contains the substring "bar" | Attribute selectors | 3 |
E[foo|="en"] | an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" | Attribute selectors | 2 |
E:root | an E element, root of the document | Structural pseudo-classes | 3 |
E:nth-child(n) | an E element, the n-th child of its parent | Structural pseudo-classes | 3 |
E:nth-last-child(n) | an E element, the n-th child of its parent, counting from the last one | Structural pseudo-classes | 3 |
E:nth-of-type(n) | an E element, the n-th sibling of its type | Structural pseudo-classes | 3 |
E:nth-last-of-type(n) | an E element, the n-th sibling of its type, counting from the last one | Structural pseudo-classes | 3 |
E:first-child | an E element, first child of its parent | Structural pseudo-classes | 2 |
E:last-child | an E element, last child of its parent | Structural pseudo-classes | 3 |
E:first-of-type | an E element, first sibling of its type | Structural pseudo-classes | 3 |
E:last-of-type | an E element, last sibling of its type | Structural pseudo-classes | 3 |
E:only-child | an E element, only child of its parent | Structural pseudo-classes | 3 |
E:only-of-type | an E element, only sibling of its type | Structural pseudo-classes | 3 |
E:empty | an E element that has no children (including text nodes) | Structural pseudo-classes | 3 |
E:link E:visited | an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) | The link pseudo-classes | 1 |
E:active E:hover E:focus | an E element during certain user actions | The user action pseudo-classes | 1 and 2 |
E:target | an E element being the target of the referring URI | The target pseudo-class | 3 |
E:lang(fr) | an element of type E in language "fr" (the document language specifies how language is determined) | The :lang() pseudo-class | 2 |
E:enabled E:disabled | a user interface element E which is enabled or disabled | The UI element states pseudo-classes | 3 |
E:checked | a user interface element E which is checked (for instance a radio-button or checkbox) | The UI element states pseudo-classes | 3 |
E::first-line | the first formatted line of an E element | The ::first-line pseudo-element | 1 |
E::first-letter | the first formatted letter of an E element | The ::first-letter pseudo-element | 1 |
E::before | generated content before an E element | The ::before pseudo-element | 2 |
E::after | generated content after an E element | The ::after pseudo-element | 2 |
E.warning | an E element whose class is "warning" (the document language specifies how class is determined). | Class selectors | 1 |
E#myid | an E element with ID equal to "myid". | ID selectors | 1 |
E:not(s) | an E element that does not match simple selector s | Negation pseudo-class | 3 |
E F | an F element descendant of an E element | Descendant combinator | 1 |
E > F | an F element child of an E element | Child combinator | 2 |
E + F | an F element immediately preceded by an E element | Adjacent sibling combinator | 2 |
E ~ F | an F element preceded by an E element | General sibling combinator | 3 |
Name | Values | Initial value | Applies to | Inherited? | Percentages | Media |
---|---|---|---|---|---|---|
background-attachment
| scroll | fixed | inherit | scroll | no | visual | ||
background-color
| <color> | inherit | transparent | no | visual | ||
background-image
| <uri> | none | inherit | none | no | visual | ||
background-position
| [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit | 0% 0% | no | refer to the size of the box itself | visual | |
background-repeat
| repeat | repeat-x | repeat-y | no-repeat | inherit | repeat | no | visual | ||
background
| ['background-color' ||
'background-image' ||
'background-repeat' ||
'background-attachment' ||
background-position ] |
inherit
| see individual properties | no | allowed on 'background-position' | visual | |
border-collapse
| collapse | separate | inherit | separate | ''table'' and ''inline-table'' elements | yes | visual | |
border-color
| [ <color> ]{1,4} | inherit | see individual properties | no | visual | ||
border-spacing
| <length> <length>? | inherit | 0 | ''table'' and ''inline-table'' elements | yes | visual | |
border-style
| <border-style>{1,4} | inherit | see individual properties | no | visual | ||
border-top
border-right
border-bottom
border-left
| [ <border-width> ||
<border-style> ||
border-top-color ] |
inherit
| see individual properties | no | visual | ||
border-top-color
border-right-color
border-bottom-color
border-left-color
| <color> | inherit | the value of the 'color' property | no | visual | ||
border-top-style
border-right-style
border-bottom-style
border-left-style
| <border-style> | inherit | none | no | visual | ||
border-top-width
border-right-width
border-bottom-width
border-left-width
| <border-width> | inherit | medium | no | visual | ||
border-width
| <border-width>{1,4} | inherit | see individual properties | no | visual | ||
border
| [ <border-width> ||
<border-style> ||
border-top-color ] |
inherit
| see individual properties | no | visual | ||
bottom
| <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
caption-side
| top | bottom | inherit | top | ''table-caption'' elements | yes | visual | |
clear
| none | left | right | both | inherit | none | block-level elements | no | visual | |
clip
| <shape> | auto | inherit | auto | absolutely positioned elements | no | visual | |
color
| <color> | inherit | depends on user agent | yes | visual | ||
content
| normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | normal | :before and :after pseudo-elements | no | all | |
counter-increment
| [ <identifier> <integer>? ]+ | none | inherit | none | no | all | ||
counter-reset
| [ <identifier> <integer>? ]+ | none | inherit | none | no | all | ||
cursor
| [ [<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 ] ] | inherit | auto | yes | visual, interactive | ||
direction
| ltr | rtl | inherit | ltr | all elements, but see prose | yes | visual | |
display
| inline | block | list-item | 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 | inherit | inline | no | all | ||
empty-cells
| show | hide | inherit | show | ''table-cell'' elements | yes | visual | |
float
| left | right | none | inherit | none | all, but see 9.7 | no | visual | |
font-family
| [ [ <family-name> | <generic-family> ] [, <family-name>| <generic-family> ]* ] | inherit | depends on user agent | yes | visual | ||
font-size
| <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium | yes | refer to inherited font size | visual | |
font-style
| normal | italic | oblique | inherit | normal | yes | visual | ||
font-variant
| normal | small-caps | inherit | normal | yes | visual | ||
font-weight
| normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | yes | visual | ||
font
| [ [ 'font-style' ||
'font-variant' ||
'font-weight' ]?
'font-size'
[ / 'line-height' ]?
font-family
] |
caption |
icon |
menu |
message-box |
small-caption |
status-bar |
inherit
| see individual properties | yes | see individual properties | visual | |
height
| <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
left
| <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
letter-spacing
| normal | <length> | inherit | normal | yes | visual | ||
line-height
| normal | <number> | <length> | <percentage> | inherit | normal | yes | refer to the font size of the element itself | visual | |
list-style-image
| <uri> | none | inherit | none | elements with 'display: list-item' | yes | visual | |
list-style-position
| inside | outside | inherit | outside | elements with 'display: list-item' | yes | visual | |
list-style-type
| disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit | disc | elements with 'display: list-item' | yes | visual | |
list-style
| [ 'list-style-type' ||
'list-style-position' ||
list-style-image
] |
inherit
| see individual properties | elements with 'display: list-item' | yes | visual | |
margin-right
margin-left
| <margin-width> | inherit | 0 | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
margin-top
margin-bottom
| <margin-width> | inherit | 0 | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
margin
| <margin-width>{1,4} | inherit | see individual properties | all elements except elements with table display types other than table-caption, table and inline-table | no | refer to width of containing block | visual |
max-height
| <length> | <percentage> | none | inherit | none | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
max-width
| <length> | <percentage> | none | inherit | none | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
min-height
| <length> | <percentage> | inherit | 0 | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual |
min-width
| <length> | <percentage> | inherit | 0 | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
opacity
| <number> | inherit | 1 | all | no | visual | |
orphans
| <integer> | inherit | 2 | block container elements | yes | visual, paged | |
outline-color
| <color> | invert | inherit | invert | no | visual, interactive | ||
outline-style
| <border-style> | inherit | none | no | visual, interactive | ||
outline-width
| <border-width> | inherit | medium | no | visual, interactive | ||
outline
| [ 'outline-color' ||
'outline-style' ||
outline-width
] |
inherit
| see individual properties | no | visual, interactive | ||
overflow
| visible | hidden | scroll | auto | inherit | visible | block containers | no | visual | |
padding-top
padding-right
padding-bottom
padding-left
| <padding-width> | inherit | 0 | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column | no | refer to width of containing block | visual |
padding
| <padding-width>{1,4} | inherit | see individual properties | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column | no | refer to width of containing block | visual |
page-break-after
| auto | always | avoid | left | right | inherit | auto | block-level elements (but see text) | no | visual, paged | |
page-break-before
| auto | always | avoid | left | right | inherit | auto | block-level elements (but see text) | no | visual, paged | |
page-break-inside
| avoid | auto | inherit | auto | block-level elements (but see text) | no | visual, paged | |
position
| static | relative | absolute | fixed | inherit | static | no | visual | ||
quotes
| [<string> <string>]+ | none | inherit | depends on user agent | yes | visual | ||
right
| <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual |
table-layout
| auto | fixed | inherit | auto | ''table'' and ''inline-table'' elements | no | visual | |
text-align
| left | right | center | justify | inherit | a nameless value that acts as ''text-align/left'' if 'direction' is ''ltr'', ''text-align/right'' if 'direction' is ''rtl'' | block containers | yes | visual | |
text-decoration
| none | [ underline || overline || line-through || blink ] | inherit | none | no (see prose) | visual | ||
text-indent
| <length> | <percentage> | inherit | 0 | block containers | yes | refer to width of containing block | visual |
text-transform
| capitalize | uppercase | lowercase | none | inherit | none | yes | visual | ||
top
| <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual |
unicode-bidi
| normal | embed | bidi-override | inherit | normal | all elements, but see prose | no | visual | |
vertical-align
| baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | baseline | inline-level and ''table-cell'' elements | no | refer to the 'line-height' of the element itself | visual |
visibility
| visible | hidden | collapse | inherit | visible | yes | visual | ||
white-space
| normal | pre | nowrap | pre-wrap | pre-line | inherit | normal | yes | visual | ||
widows
| <integer> | inherit | 2 | block container elements | yes | visual, paged | |
width
| <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual |
word-spacing
| normal | <length> | inherit | normal | yes | visual | ||
z-index
| auto | <integer> | inherit | auto | positioned elements | no | visual |