CSS reference
=============

Use this **CSS reference** to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Also included is a brief DOM-CSS / CSSOM reference.

Basic rule syntax
-----------------

### Style rule syntax


```css
style-rule ::=
 selectors-list {
      properties-list
    }
```


Where:


```css
selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]
```


See the index of *selectors*, *pseudo-classes*, and *pseudo-elements* below. The syntax for each specified *value* depends on the data type defined for each specified *property*.

#### Style rule examples


```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```


For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. Be aware that any syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.

### At-rule syntax

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

Index
-----

**Note:** This index does not include SVG-exclusive presentation attributes, which can be used as CSS properties on SVG elements.

**Note:** The property names in this index do **not** include the JavaScript names which do differ from the CSS standard names.

### -

* `--*`
* `-webkit-line-clamp`

### A

* `abs()`
* `accent-color`
* `acos()`
* `:active`
* `additive-symbols (@counter-style)`
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks`
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-range`
* `animation-range-end`
* `animation-range-start`
* `animation-timeline`
* `animation-timing-function`
* `@annotation`
* `:any-link`
* `appearance`
* `ascent-override (@font-face)`
* `asin()`
* `aspect-ratio`
* `atan()`
* `atan2()`
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `base-palette (@font-palette-values)`
* `<basic-shape>`
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>`
* `block-size`
* `blur()`
* `border`
* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-end-end-radius`
* `border-end-start-radius`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius`
* `border-start-start-radius`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom`
* `@bottom-center`
* `box-decoration-break`
* `box-shadow`
* `box-sizing`
* `break-after`
* `break-before`
* `break-inside`
* `brightness()`

### C

* `calc()`
* `caption-side`
* `caret`
* `caret-color`
* `caret-shape`
* `@character-variant`
* `@charset`
* `:checked`
* `circle()`
* `clamp()`
* `clear`
* `clip`
* `clip-path`
* `<color>`
* `color`
* `color-scheme`
* `column-count`
* `column-fill`
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width`
* `columns`
* `conic-gradient()`
* `contain`
* `contain-intrinsic-block-size`
* `contain-intrinsic-height`
* `contain-intrinsic-inline-size`
* `contain-intrinsic-size`
* `contain-intrinsic-width`
* `container`
* `container-name`
* `container-type`
* `content`
* `content-visibility`
* `contrast()`
* `cos()`
* `<counter>`
* `counter-increment`
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counters()`
* `cross-fade()`
* `cubic-bezier()`
* `::cue`
* `::cue-region`
* `:current`
* `cursor`
* `<custom-ident>`
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>`
* `:default`
* `:defined`
* `descent-override (@font-face)`
* `<dimension>`
* `:dir`
* `direction`
* `:disabled`
* `display`
* `<display-box>`
* `<display-inside>`
* `<display-internal>`
* `<display-legacy>`
* `<display-listitem>`
* `<display-outside>`
* `drop-shadow()`
* `resolution#dpcm`
* `resolution#dpi`
* `resolution#dppx`

### E

* `<easing-function>`
* `element()`
* `ellipse()`
* `:empty`
* `empty-cells`
* `:enabled`
* `env()`
* `exp()`
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)`
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()`
* `<flex>`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr`
* `float`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family`
* `font-family (@font-face)`
* `font-family (@font-palette-values)`
* `font-feature-settings`
* `font-feature-settings (@font-face)`
* `@font-feature-values`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing`
* `font-palette`
* `@font-palette-values`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-stretch (@font-face)`
* `font-style`
* `font-style (@font-face)`
* `font-synthesis`
* `font-synthesis-position`
* `font-synthesis-small-caps`
* `font-synthesis-style`
* `font-synthesis-weight`
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-variation-settings (@font-face)`
* `font-weight`
* `font-weight (@font-face)`
* `forced-color-adjust`
* `format()`
* `<frequency>`
* `<frequency-percentage>`
* `:fullscreen`
* `:future`

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error`
* `grayscale()`
* `grid`
* `grid-area`
* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-column`
* `grid-column-end`
* `grid-column-start`
* `grid-row`
* `grid-row-end`
* `grid-row-start`
* `grid-template`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz`
* `hanging-punctuation`
* `:has`
* `height`
* `@historical-forms`
* `:host()`
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()`
* `hwb()`
* `hyphenate-character`
* `hyphenate-limit-chars`
* `hyphens`
* `hypot()`

### I

* `<ident>`
* `<image>`
* `image()`
* `image-orientation`
* `image-rendering`
* `image-resolution`
* `image-set()`
* `@import`
* `:in-range`
* `:indeterminate`
* `inherit`
* `inherits (@property)`
* `initial`
* `initial-letter`
* `initial-letter-align`
* `initial-value (@property)`
* `inline-size`
* `input-security`
* `inset`
* `inset()`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
* `<integer>`
* `:invalid`
* `invert()`
* `:is`
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items`
* `justify-self`
* `justify-tracks`

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang`
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left`
* `left`
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)`
* `line-height`
* `line-height-step`
* `<line-style>`
* `linear-gradient()`
* `:link`
* `list-style`
* `list-style-image`
* `list-style-position`
* `list-style-type`
* `local()`
* `:local-link`
* `log()`

### M

* `length#mm`
* `margin`
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-bottom`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim`
* `::marker`
* `marks (@page)`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
* `masonry-auto-flow`
* `math-depth`
* `math-shift`
* `math-style`
* `matrix()`
* `matrix3d()`
* `max()`
* `max-block-size`
* `max-height`
* `max-inline-size`
* `max-lines`
* `max-width`
* `@media`
* `min()`
* `min-block-size`
* `min-height`
* `min-inline-size`
* `min-width`
* `minmax()`
* `mix-blend-mode`
* `mod()`
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)`
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type`
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()`
* `:optional`
* `order`
* `@ornaments`
* `orphans`
* `:out-of-range`
* `outline`
* `outline-color`
* `outline-offset`
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor`
* `overflow-block`
* `overflow-clip-margin`
* `overflow-inline`
* `overflow-wrap`
* `overflow-x`
* `overflow-y`
* `overlay`
* `override-colors (@font-palette-values)`
* `overscroll-behavior`
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
* `overscroll-behavior-x`
* `overscroll-behavior-y`

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)`
* `padding`
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-bottom`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
* `padding-left`
* `padding-right`
* `padding-top`
* `@page`
* `page`
* `page-break-after`
* `page-break-before`
* `page-break-inside`
* `page-orientation (@page)`
* `paint()`
* `paint-order`
* `::part`
* `:past`
* `path()`
* `:paused`
* `<percentage>`
* `perspective`
* `perspective()`
* `perspective-origin`
* `:picture-in-picture`
* `place-content`
* `place-items`
* `place-self`
* `::placeholder`
* `:placeholder-shown`
* `:playing`
* `pointer-events`
* `polygon()`
* `<position>`
* `position`
* `pow()`
* `prefix (@counter-style)`
* `print-color-adjust`
* `@property`

### Q

* `length#Q`
* `quotes`

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()`
* `range (@counter-style)`
* `<ratio>`
* `ray()`
* `:read-only`
* `:read-write`
* `rect()`
* `rem()`
* `repeat()`
* `repeating-conic-gradient()`
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `:required`
* `resize`
* `<resolution>`
* `reversed()`
* `revert`
* `rgb()`
* `rgba()`
* `:right`
* `right`
* `@right-bottom`
* `:root`
* `rotate`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `round()`
* `row-gap`
* `ruby-align`
* `ruby-merge`
* `ruby-position`

### S

* `saturate()`
* `scale`
* `scale()`
* `scale3d()`
* `scaleX()`
* `scaleY()`
* `scaleZ()`
* `:scope`
* `@scope`
* `scroll()`
* `scroll-behavior`
* `scroll-margin`
* `scroll-margin-block`
* `scroll-margin-block-end`
* `scroll-margin-block-start`
* `scroll-margin-bottom`
* `scroll-margin-inline`
* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
* `scroll-padding`
* `scroll-padding-block`
* `scroll-padding-block-end`
* `scroll-padding-block-start`
* `scroll-padding-bottom`
* `scroll-padding-inline`
* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
* `scroll-snap-align`
* `scroll-snap-stop`
* `scroll-snap-type`
* `scroll-timeline`
* `scroll-timeline-axis`
* `scroll-timeline-name`
* `scrollbar-color`
* `scrollbar-gutter`
* `scrollbar-width`
* `::selection`
* `selector()`
* `sepia()`
* `<shape>`
* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
* `sign()`
* `sin()`
* `size (@page)`
* `size-adjust (@font-face)`
* `skew()`
* `skewX()`
* `skewY()`
* `::slotted`
* `speak-as (@counter-style)`
* `::spelling-error`
* `sqrt()`
* `src (@font-face)`
* `@starting-style`
* `steps()`
* `<string>`
* `@styleset`
* `@stylistic`
* `suffix (@counter-style)`
* `@supports`
* `supports() (@import)`
* `@swash`
* `symbols (@counter-style)`
* `symbols()`
* `syntax (@property)`
* `system (@counter-style)`
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout`
* `tan()`
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text`
* `target-text()`
* `:target-within`
* `text-align`
* `text-align-last`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip`
* `text-decoration-skip-ink`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis`
* `text-emphasis-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-indent`
* `text-justify`
* `text-orientation`
* `text-overflow`
* `text-rendering`
* `text-shadow`
* `text-size-adjust`
* `text-transform`
* `text-underline-offset`
* `text-underline-position`
* `text-wrap`
* `<time>`
* `<time-percentage>`
* `timeline-scope`
* `top`
* `@top-center`
* `touch-action`
* `transform`
* `transform-box`
* `<transform-function>`
* `transform-origin`
* `transform-style`
* `transition`
* `transition-behavior`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
* `translate`
* `translate()`
* `translate3d()`
* `translateX()`
* `translateY()`
* `translateZ()`
* `type()`

### U

* `unicode-bidi`
* `unicode-range (@font-face)`
* `unset`
* `<url>`
* `url()`
* `:user-invalid`
* `user-select`
* `:user-valid`

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline`
* `view-timeline-axis`
* `view-timeline-inset`
* `view-timeline-name`
* `::view-transition`
* `::view-transition-group`
* `::view-transition-image-pair`
* `view-transition-name`
* `::view-transition-new`
* `::view-transition-old`
* `visibility`
* `:visited`

### W

* `:where`
* `white-space`
* `white-space-collapse`
* `widows`
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap`
* `writing-mode`

### X

* `resolution#x`

### Z

* `z-index`

### Others

* `--*`

Selectors
---------

The following are the various selectors, which allow styles to be conditional based on various features of elements within the DOM.

### Basic selectors

**Basic selectors** are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

* Universal selector `*`
* Type selector `elementname`
* Class selector `.classname`
* ID selector `#idname`
* Attribute selector `[attr=value]`
### Grouping selectors

Selector list `A, B`

Specifies that both `A` and `B` elements are selected. This is a grouping method to select several matching elements.

### Combinators

Combinators are selectors that establish a relationship between two or more simple selectors, such as "`A` is a child of `B`" or "`A` is adjacent to `B`", creating a complex selector.

Next-sibling combinator `A + B`

Specifies that the elements selected by both `A` and `B` have the same parent and that the element selected by `B` immediately follows the element selected by `A` horizontally.

Subsequent-sibling combinator `A ~ B`

Specifies that the elements selected by both `A` and `B` share the same parent and that the element selected by `A` comes before—but not necessarily immediately before—the element selected by `B`.

Child combinator `A > B`

Specifies that the element selected by `B` is the direct child of the element selected by `A`.

Descendant combinator `A B`

Specifies that the element selected by `B` is a descendant of the element selected by `A`, but is not necessarily a direct child.

Column combinator `A || B` 
Experimental

Specifies that the element selected by `B` is located within the table column specified by `A`. Elements which span multiple columns are considered to be a member of all of those columns.

### Pseudo

Pseudo classes `:`

Specifies a special state of the selected element(s).

Pseudo elements `::`

Represents entities that are not included in HTML.


See also selectors in the Selectors specification and the pseudo-element specification.

Concepts
--------

### Syntax and semantics

* CSS syntax
* At-rules
* Cascade
* Comments
* Descriptor
* Inheritance
* Shorthand properties
* Specificity
* Value definition syntax
* CSS unit and value types
* CSS functional notations
### Values

* Actual value
* Computed value
* Initial value
* Resolved value
* Specified value
* Used value
### Layout

* Block formatting context
* Box model
* Containing block
* Layout mode
* Margin collapsing
* Replaced elements
* Stacking context
* Visual formatting model
DOM-CSS / CSSOM
---------------

### Major object types

* `Document.styleSheets`
* `styleSheets[i].cssRules`
* `cssRules[i].cssText` (selector & style)
* `cssRules[i].selectorText`
* `HTMLElement.style`
* `HTMLElement.style.cssText` (just style)
* `Element.className`
* `Element.classList`
### Important methods

* `CSSStyleSheet.insertRule()`
* `CSSStyleSheet.deleteRule()`
See also
--------

* Mozilla CSS extensions (prefixed with `-moz-`)
* WebKit CSS extensions (mostly prefixed with `-webkit-`)
External Links
--------------

* CSS Indices (w3.org)