Revision 1103975 of CSS reference

<p><span class="seoSummary">This <em>CSS Reference</em> shows the basic syntax of a CSS rule; lists all standard <a href="/en-US/docs/CSS">CSS</a> properties, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> and <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/At-rule">@-rules</a>, <a href="/en-US/docs/Web/CSS/length">units</a>, and <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>,&nbsp;all together in <a href="#Keyword_index">alphabetical order</a>, as well as just the <a href="#Selectors">selectors by type</a>;&nbsp;and 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 <a href="/en-US/docs/Web/CSS/CSS3">CSS3</a> property and concept standardized, or already stabilized. &nbsp;Also included is a brief&nbsp;<a href="#DOM_CSS">DOM-CSS / CSSOM reference</a>.</span></p>

<p>Note that CSS rule-definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM,&nbsp;the&nbsp;rule-management system, is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>

<p>See also <a href="/en-US/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> for Gecko-specific properties prefixed with <code>-moz</code>; and <a href="/en-US/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> for WebKit-specific properties. See <a href="https://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> by Peter Beverloo for all prefixed properties.</p>

<h2 id="Keyword_index">Keyword index</h2>

<div>{{CSS_Ref}}</div>

<div class="column-container">
<div class="column-half">
<h2 id="Selectors">Selectors</h2>

<ul>
 <li>Basic Selectors
  <ul>
   <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selectors</a><code> elementname</code></li>
   <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selectors</a> <code>.classname</code></li>
   <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> <code>#idname</code></li>
   <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selectors</a><code> * ns|* *|*</code></li>
   <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a><code> [attr=value]</code></li>
  </ul>
 </li>
 <li>Combinators &nbsp; &nbsp;<a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships">(more info)</a>
  <ul>
   <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a> <code>A + B</code></li>
   <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a> <code>A ~ B</code></li>
   <li><a href="/en-US/docs/Web/CSS/Child_selectors">Child selectors</a> <code>A &gt; B</code></li>
   <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant selectors</a> <code>A B</code></li>
  </ul>
 </li>
 <li id="pelm">Pseudo-elements &nbsp; &nbsp;<a href="/en-US/docs/Web/CSS/Pseudo-elements">(more info)</a>
  <ul>
   <li>{{ Cssxref("::after") }}</li>
   <li>{{ Cssxref("::before") }}</li>
   <li>{{ Cssxref("::first-letter") }}</li>
   <li>{{ Cssxref("::first-line") }}</li>
   <li>{{ Cssxref("::selection") }}</li>
   <li>{{ Cssxref("::backdrop") }}</li>
   <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
   <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
   <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
   <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
  </ul>
 </li>
 <li id="pcls">Standard pseudo-classes &nbsp; &nbsp;<a href="/en-US/docs/Web/CSS/Pseudo-classes">(more info)</a>
  <div class="index">
  <ul>
   <li>{{ Cssxref(":active") }}</li>
   <li>{{ cssxref(':any')}}</li>
   <li>{{ Cssxref(":checked") }}</li>
   <li>{{ Cssxref(":default") }}</li>
   <li>{{ Cssxref(":dir", ":dir()")}}</li>
   <li>{{ Cssxref(":disabled") }}</li>
   <li>{{ Cssxref(":empty") }}</li>
   <li>{{ Cssxref(":enabled") }}</li>
   <li>{{ Cssxref(":first") }}</li>
   <li>{{ Cssxref(":first-child") }}</li>
   <li>{{ Cssxref(":first-of-type") }}</li>
   <li>{{ Cssxref(":fullscreen") }}</li>
   <li>{{ Cssxref(":focus") }}</li>
   <li>{{ Cssxref(":hover") }}</li>
   <li>{{ Cssxref(":indeterminate") }}</li>
   <li>{{ Cssxref(":in-range") }}</li>
   <li>{{ Cssxref(":invalid") }}</li>
   <li>{{ Cssxref(":lang", ":lang()") }}</li>
   <li>{{ Cssxref(":last-child") }}</li>
   <li>{{ Cssxref(":last-of-type") }}</li>
   <li>{{ Cssxref(":left") }}</li>
   <li>{{ Cssxref(":link") }}</li>
   <li>{{ Cssxref(":not", ":not()") }}</li>
   <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
   <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
   <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
   <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
   <li>{{ Cssxref(":only-child") }}</li>
   <li>{{ Cssxref(":only-of-type") }}</li>
   <li>{{ Cssxref(":optional") }}</li>
   <li>{{ Cssxref(":out-of-range") }}</li>
   <li>{{ Cssxref(":read-only") }}</li>
   <li>{{ Cssxref(":read-write") }}</li>
   <li>{{ Cssxref(":required") }}</li>
   <li>{{ Cssxref(":right") }}</li>
   <li>{{ Cssxref(":root") }}</li>
   <li>{{ Cssxref(":scope") }}</li>
   <li>{{ Cssxref(":target") }}</li>
   <li>{{ Cssxref(":valid") }}</li>
   <li>{{ Cssxref(":visited") }}</li>
  </ul>
  </div>
 </li>
</ul>

<p>A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p>

<h2 id="CSS3_Tutorials">CSS3 Tutorials</h2>

<p>These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:</p>

<ul>
 <li><a href="/en-US/docs/Web/Guide/CSS/Media_queries">Using CSS media queries</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Counters">Using CSS counters</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients">Using CSS gradients</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Using CSS transforms</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">Using CSS animations</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds">Using CSS multiple backgrounds</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
</ul>

<h2 id="Concepts">Concepts</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li>
 <li><a href="/en-US/docs/Web/CSS/At-rule">At-rule</a></li>
 <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li>
 <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li>
 <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li>
 <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li>
 <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li>
 <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li>
 <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li>
 <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li>
 <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li>
 <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li>
 <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced element</a></li>
 <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
 <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></li>
 <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
 <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li>
</ul>

<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>

<p>Major&nbsp;object&nbsp;types:</p>

<ul>
 <li>document . <a href="/en-US/docs/Web/API/Document/styleSheets">styleSheets</a></li>
 <li>styleSheets[x] . <a href="/en-US/docs/Web/API/CSSRuleList">cssRules</a></li>
 <li>cssRules[x] . <a href="/en-US/docs/Web/API/CSSRule/cssText">cssText</a> (selector &amp; style)</li>
 <li>cssRules[x] . <a href="/en-US/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
 <li>elem . <a href="/en-US/docs/Web/API/HTMLElement/style">style</a></li>
 <li>elem . style . <a href="/en-US/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
 <li>elem . <a href="/en-US/docs/Web/API/Element/className">className</a></li>
 <li>elem . <a href="/en-US/docs/Web/API/Element/classList">classList</a></li>
</ul>

<p>Important methods:</p>

<ul>
 <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
 <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
</ul>
</div>
</div>