Use this CSS reference to browse an alphabetical index of all the standard CSS properties, pseudo-classes, pseudo-elements, data types, and at-rules. You can also browse a list of all the CSS selectors organized by type and a list of key CSS concepts. Also included is a brief DOM-CSS / CSSOM reference.
Please see Mozilla CSS Extensions for Gecko-specific properties (prefixed with -moz). See WebKit CSS Extensions for WebKit-specific properties (mostly prefixed with -webkit).
Note that CSS rule definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM (the rule management system) is object-based.
Basic rule syntax
Style rule syntax
selectorlist {
property: value;
[more property:value; pairs]
}
... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
See selector, pseudo-element, pseudo-class lists below.
Style rule examples
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
For a beginner-level introduction to the syntax of CSS selectors, please see this tutorial. Be warned that any CSS syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser.
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.
Keyword index
:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()
::backdropbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)<blend-mode>block-sizeblur()borderborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-center@bottom-left@bottom-left-corner@bottom-right@bottom-right-cornerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
calc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clearclipclip-pathcm<color>colorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcontrast()<counter>counter-incrementcounter-reset@counter-stylecross-fade()cubic-bezier()::cuecursor<custom-ident>
fallback (@counter-style)filter:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-weightfont-weight (@font-face)format()format() (@font-face)frframes()<frequency>:fullscreen
grad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
<ident><image>image()image-orientationimage-renderingimage-resolutionimage-set()ime-mode@importin:in-range:indeterminateinheritinitialinline-sizeinset()<integer>:invalidinvert()isolation
:lang:last-child:last-of-typeleader():leftleft@left-bottom@left-middle@left-top<length>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()
marginmargin-block-endmargin-block-startmargin-bottommargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmaskmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max-heightmax-height (@viewport)max-widthmax-width (@viewport)max-zoom (@viewport)@mediamin-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmms
@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>
object-fitobject-positionoffset-block-endoffset-block-startoffset-inline-endoffset-inline-start:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-y
pad (@counter-style)paddingpadding-block-endpadding-block-startpadding-bottompadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepc<percentage>perspectiveperspective()perspective-originpointer-eventspolygon()<position>positionprefix (@counter-style)ptpx
radradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom@right-middle@right-top:rootrotate()rotate3d()rotateX()rotateY()rotateZ()ruby-alignruby-mergeruby-position
ssaturate()scale()scale3d()scaleX()scaleY()scaleZ():scopescroll-behaviorscroll-snap-coordinatescroll-snap-destinationscroll-snap-type::selectionsepia()<shape>shape-image-thresholdshape-marginshape-outsideskew()skewX()skewY()speak-as (@counter-style)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supports@swashswash()symbols (@counter-style)symbols()system (@counter-style)
tab-sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-position<time><timing-function>top@top-center@top-left@top-left-corner@top-right@top-right-cornertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslate()translate3d()translateX()translateY()translateZ()turn
Selectors
- Basic Selectors
- Type selectors
elementname - Class selectors
.classname - ID selectors
#idname - Universal selectors
* ns|* *|* - Attribute selectors
[attr=value]
- Type selectors
- Combinators (more info)
- Adjacent sibling selectors
A + B - General sibling selectors
A ~ B - Child selectors
A > B - Descendant selectors
A B
- Adjacent sibling selectors
- Pseudo-elements (more info)
- Standard pseudo-classes (more info)
:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited
See also: A complete list of selectors in the Selectors Level 3 specification.
Concepts
- CSS syntax
- At-rule
- Comments
- Specificity
- Inheritance
- Initial value
- Specified value
- Computed value
- Used value
- Actual value
- Resolved value
- Box model
- Replaced element
- Value definition syntax
- Shorthand properties
- Mastering margin collapsing
- Containing block
- Visual formatting model
- Layout mode
DOM-CSS / CSSOM
Major object types:
- document.styleSheets
- styleSheets[i].cssRules
- cssRules[i].cssText (selector & style)
- cssRules[i].selectorText
- elem.style
- elem.style.cssText (just style)
- elem.className
- elem.classList
Important methods: