This CSS Reference shows the basic syntax of a CSS rule; and lists all standard CSS properties, pseudo-classes and pseudo-elements, @-rules, units, and selectors together in alphabetical order, as well as just the selectors by type. It allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any CSS3 property and concept standardized, or already stabilized.
See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz
; and WebKit CSS Extensions for WebKit-specific properties. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.
Basic syntax
selectorlist { property: value; [more property:value; pairs] }
...where selectorlist is: selector[::pseudo-element] [:pseudo-class] [, selectorlist]
See selector, pseudo-element, pseudo-class lists below.
Examples
strong { color: red;} div.menu-bar li:hover > ul { display: block; }
Keyword index
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)
- {{ Cssxref("::after") }}
- {{ Cssxref("::before") }}
- {{ Cssxref("::first-letter") }}
- {{ Cssxref("::first-line") }}
- {{ Cssxref("::selection") }}
- {{ Cssxref("::backdrop") }}
- {{ Cssxref("::placeholder") }} {{experimental_inline}}
- {{ Cssxref("::marker") }} {{experimental_inline}}
- {{ Cssxref("::spelling-error") }} {{experimental_inline}}
- {{ Cssxref("::grammar-error") }} {{experimental_inline}}
- Standard pseudo-classes (more info)
- {{ Cssxref(":active") }}
- {{ cssxref(':any')}}
- {{ Cssxref(":checked") }}
- {{ Cssxref(":default") }}
- {{ Cssxref(":dir", ":dir()")}}
- {{ Cssxref(":disabled") }}
- {{ Cssxref(":empty") }}
- {{ Cssxref(":enabled") }}
- {{ Cssxref(":first") }}
- {{ Cssxref(":first-child") }}
- {{ Cssxref(":first-of-type") }}
- {{ Cssxref(":fullscreen") }}
- {{ Cssxref(":focus") }}
- {{ Cssxref(":hover") }}
- {{ Cssxref(":indeterminate") }}
- {{ Cssxref(":in-range") }}
- {{ Cssxref(":invalid") }}
- {{ Cssxref(":lang", ":lang()") }}
- {{ Cssxref(":last-child") }}
- {{ Cssxref(":last-of-type") }}
- {{ Cssxref(":left") }}
- {{ Cssxref(":link") }}
- {{ Cssxref(":not", ":not()") }}
- {{ Cssxref(":nth-child", ":nth-child()") }}
- {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
- {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
- {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
- {{ Cssxref(":only-child") }}
- {{ Cssxref(":only-of-type") }}
- {{ Cssxref(":optional") }}
- {{ Cssxref(":out-of-range") }}
- {{ Cssxref(":read-only") }}
- {{ Cssxref(":read-write") }}
- {{ Cssxref(":required") }}
- {{ Cssxref(":right") }}
- {{ Cssxref(":root") }}
- {{ Cssxref(":scope") }}
- {{ Cssxref(":target") }}
- {{ Cssxref(":valid") }}
- {{ Cssxref(":visited") }}
A complete list of selectors in the Selectors Level 3 specification.
CSS3 Tutorials
These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:
- Using CSS media queries
- Using CSS counters
- Using CSS gradients
- Using CSS transforms
- Using CSS animations
- Using CSS transitions
- Using CSS multiple backgrounds
- Using CSS flexible boxes
- Using CSS multi-column layouts
Concepts
- CSS syntax
- At-rule
- Comments
- Specificity
- Initial value
- Inheritance
- Specified value
- Computed value
- Used value
- Actual value
- Box model
- Replaced element
- Value definition syntax
DOM CSS-objects
- document . styleSheets
- styleSheets[x] . cssRules
- cssRules[x] . cssText (selector & style)
- cssRules[x] . selectorText
- elem . style
- elem . style . cssText (just style)
- elem . className
- elem . classList