---
title: CSS Referenz
slug: Web/CSS/Reference
tags:
  - CSS
  - CSS Referenz
translation_of: Web/CSS/Reference
original_slug: Web/CSS/CSS_Referenz
---
<div>{{CSSRef}}</div>

<p class="summary">Verwende diese <strong>CSS-Referenz</strong> für einen <a href="#Index">alphabetischen Index</a> aller Standard-<a href="/de/docs/Web/CSS">CSS</a>-Eigenschaften, <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a>, <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a>, <a href="/de/docs/Web/CSS/CSS_Typen">Datentypen</a> und <a href="/de/docs/Web/CSS/At-rule">@-Regeln</a>. Du kannst eine Liste aller <a href="#Selektoren">Selektoren</a> und eine Liste aller <a href="#Konzepte">Konzepte</a> ansehen. Dies beinhaltet auch eine kurze Referenz zu <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM</a>.</p>

<h2 id="Grundlegende_Syntax_von_Regeln">Grundlegende Syntax von Regeln</h2>

<h3 id="Syntax_von_Stilregeln">Syntax von Stilregeln</h3>

<pre class="syntaxbox"><strong><var>selektorliste</var> {
  <var>eigenschaft</var>: <var>wert</var>;</strong>
  <var>[weitere eigenschaft:wert; Paare]</var>
<strong>}</strong>

... wobei <var>selektorliste</var>: <var>selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten]</var>

Siehe Listen aller <a href="#Selectors"><em>Selektoren</em></a>, <a href="#pcls"><em>Pseudo-Klassen</em></a> und <a href="#pelm"><em>Pseudo-Elemente</em></a> weiter unten.
</pre>

<h4 id="Beispiele_für_Stilregeln"><em>Beispiele für Stilregeln</em></h4>

<pre class="brush: css"><em>
strong {
  color: red;
}

div.menu-bar li:hover &gt; ul {
  display: block;
}
</em></pre>

<p><em>Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe <a href="/de/docs/Learn/CSS/Introduction_to_CSS/Selectors">diese Anleitung</a>. Beachte, dass jeder <a href="/de/docs/Web/CSS/Syntax">CSS-Syntax</a>-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-basiert</a> sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) <a href="https://www.w3.org/TR/cssom/#introduction">objekt-basiert</a> ist.</em></p>

<h3 id="Syntax_von_-Regeln"><em>Syntax von @-Regeln</em></h3>

<p><em>Da die Struktur von @-Regeln stark variiert, schaue bitte bei <a href="/de/docs/Web/CSS/At-rule">@-Regel</a> nach, um die Syntax der gewünschten Regel herauszufinden.</em></p>

<h2 id="Index"><em>Index</em></h2>

<div class="note">
<p><em><strong>Hinweis:</strong> Die Bezeichnungen der Eigenschaften enthalten <strong>nicht</strong> die <a href="/de/docs/Web/CSS/CSS_Properties_Reference">JavaScript-Namen</a>, wenn sie sich von den CSS-Standardbezeichnern unterscheiden.</em></p>
</div>

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

<h2 id="Selektoren"><em>Selektoren</em></h2>

<h3 id="Einfache_Selektoren"><a href="/de/docs/Web/CSS/CSS_Selectors#Grundlegende_Selektoren">Einfache Selektoren</a></h3>

<ul>
 <li><em><a href="/de/docs/Web/CSS/Type_selectors">Typselektor</a> <code>Elementname</code></em></li>
 <li><em><a href="/de/docs/Web/CSS/Klassenselektoren">Klassenselektor</a> <code>.klassenname</code></em></li>
 <li><em><a href="/de/docs/Web/CSS/ID-Selektoren">ID-Selektor</a> <code>#idname</code></em></li>
 <li><em><a href="/de/docs/Web/CSS/Universal_selectors">Universalselektor</a> <code>*</code></em></li>
 <li><em><a href="/de/docs/Web/CSS/Attributselektoren">Attributselektoren</a> <code>[attribute="value"]</code> etc.</em></li>
</ul>

<h3 id="Kombinatoren"><a href="/de/docs/Web/CSS/CSS_Selectors#Kombinatoren">Kombinatoren</a></h3>

<ul>
 <li><em><a href="/de/CSS/Nachfahrkombinator">Nachfahrkombinator</a> <code>A B</code></em></li>
 <li><em><a href="/de/CSS/Kindkombinator">Kindkombinator</a> <code>A &gt; B</code></em></li>
 <li><em><a href="/de/CSS/direkter_Nachbarkombinator">direkter Nachbarkombinator</a> <code>A + B</code></em></li>
 <li><em><a href="/de/CSS/indirekter_Nachbarkombinator">indirekter Nachbarkombinator</a> <code> A ~ B</code></em></li>
 <li><em><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a></em></li>
 <li><em><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a></em></li>
</ul>

<h3 id="Pseudoklassen"><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a></h3>

<div class="index">
<ul>
 <li id="pcls">{{ Cssxref(":active") }}</li>
 <li>{{cssxref(':any')}}</li>
 <li>{{cssxref(':any-link')}}</li>
 <li>{{ Cssxref(":checked") }}</li>
 <li>{{ Cssxref(":default") }}</li>
 <li>{{ Cssxref(":defined") }}</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(":focus-visible") }}</li>
 <li>{{ Cssxref(":host") }}</li>
 <li>{{ Cssxref(":host()") }}</li>
 <li>{{ Cssxref(":host-context()") }}</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>

<h3 id="Pseudoelemente"><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a></h3>

<div class="index">
<ul>
 <li id="pelm">{{ Cssxref("::after") }}</li>
 <li>{{ Cssxref("::backdrop") }}</li>
 <li>{{ Cssxref("::before") }}</li>
 <li>{{ Cssxref("::cue") }}</li>
 <li>{{ Cssxref("::first-letter") }}</li>
 <li>{{ Cssxref("::first-line") }}</li>
 <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
 <li>{{ Cssxref("::selection") }}</li>
 <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
</ul>
</div>

<div class="note">
<p><strong>Siehe auch:</strong> Eine vollständige <a href="https://www.w3.org/TR/selectors/#selectors">Liste der Selektoren</a> in der Selectors Level 3 Spezifikation.</p>
</div>

<h2 id="Konzepte">Konzepte</h2>

<h3 id="Syntax_Semantik">Syntax &amp; Semantik</h3>

<ul>
 <li><a href="/de/docs/Web/CSS/Syntax">CSS-Syntax</a></li>
 <li><a href="/de/docs/Web/CSS/At-rule">@-Regeln</a></li>
 <li><a href="/de/docs/Web/CSS/Cascade">Kaskaden</a></li>
 <li><a href="/de/CSS/Kommentare">Kommentare</a></li>
 <li><a href="/de/docs/Glossary/Descriptor_(CSS)">Deskriptor</a></li>
 <li><a href="/de/docs/Web/CSS/inheritance">Vererbung</a></li>
 <li><a href="/de/docs/Web/CSS/Shorthand_properties">Shorthand-Eigenschaften</a></li>
 <li><a href="/de/CSS/Spezifität">Spezifität</a></li>
 <li><a href="/de/docs/Web/CSS/Value_definition_syntax">Wert-Definition-Syntax</a></li>
</ul>

<h3 id="Werte">Werte</h3>

<ul>
 <li><a href="/de/docs/Web/CSS/actual_value">tatsächlicher Wert</a></li>
 <li><a href="/de/docs/Web/CSS/computed_value">berechneter Wert</a></li>
 <li><a href="/de/docs/Web/CSS/initial_value">initialer Wert</a></li>
 <li><a href="/de/docs/Web/CSS/resolved_value">aufgelöster Wert</a></li>
 <li><a href="/de/docs/Web/CSS/specified_value">angegebener Wert</a></li>
 <li><a href="/de/docs/Web/CSS/used_value">verwendeter Wert</a></li>
</ul>

<h3 id="Layout">Layout</h3>

<ul>
 <li><a href="/de/docs/Web/Guide/CSS/Block_formatting_context">Block-Formatierung-Kontext</a></li>
 <li><a href="/de/CSS/Boxmodell">Boxmodell</a></li>
 <li><a href="/de/docs/Web/CSS/All_About_The_Containing_Block">Beinhaltender Block</a></li>
 <li><a href="/de/docs/Web/CSS/Layout_mode">Layout-Modus</a></li>
 <li><a href="/de/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin-Collapsing</a></li>
 <li><a href="/de/docs/Web/CSS/Replaced_element">Ersetzte Elemente</a></li>
 <li><a href="/de/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stapel-Kontext</a></li>
 <li><a href="/de/docs/Web/Guide/CSS/Visual_formatting_model">Visuelles Formatierungsmodel</a></li>
</ul>

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

<h3 id="Wichtigste_Objekttypen">Wichtigste Objekttypen</h3>

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

<h3 id="Wichtige_Methoden">Wichtige Methoden</h3>

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