---
title: CSS Selectors
slug: Web/CSS/CSS_Selectors
tags:
  - CSS
  - CSS Selektoren
  - Referenz
  - Selectors
  - Selektoren
  - Übersicht
translation_of: Web/CSS/CSS_Selectors
---
<div>{{CSSRef}}</div>

<p><strong>Selektoren</strong> definieren, auf welche Elemente eine Reihe von CSS Regeln angewendet wird.</p>

<h2 id="Grundlegende_Selektoren">Grundlegende Selektoren</h2>

<dl>
 <dt><a href="/de/docs/Web/CSS/Type_selectors">Typselektoren</a></dt>
 <dd>Dieser grundlegende Selektor wählt alle Elemente aus, die den angegebenen <em>Namen</em> matchen.<br>
 <strong>Syntax:</strong> <code><var>eltname</var></code><br>
 <strong>Beispiel:</strong> <code>input</code> matcht jedes {{HTMLElement('input')}} Element.</dd>
 <dt><a href="/de/docs/Web/CSS/Class_selectors">Klassenselektoren</a></dt>
 <dd>Dieser grundlegende Selektor wählt Elemente anhand ihres <code>class</code> Attributs aus.<br>
 <strong>Syntax:</strong> <code>.<var>classname</var></code><br>
 <strong>Beispiel:</strong> <code>.index</code> matcht jedes Element, das die Klasse <code>index</code> besitzt (wahrscheinlich definiert durch ein <code>class="index"</code> Attribut oder ähnliches).</dd>
 <dt><a href="/de/docs/Web/CSS/ID_selectors">ID-Selektoren</a></dt>
 <dd>Dieser grundlegende Selektor wählt Knoten anhand des Wertes ihres <code>id</code> Attributs aus. Es sollte nur ein Element mit der angegebenen ID in einem Dokument geben.<br>
 <strong>Syntax:</strong> <code>#<var>idname</var></code><br>
 <strong>Beispiel:</strong> <code>#toc</code> matcht das Element, das die ID <code>toc</code> hat (wahrscheinlich definiert durch ein <code>id="toc"</code> Attribut oder ähnliches).</dd>
 <dt><a href="/de/docs/Web/CSS/Universal_selectors">Universalselektoren</a></dt>
 <dd>Dieser grundlegende Selektor wählt alle Knoten aus. Er existiert auch in einer Ein-Namensraum- und einer Alle-Namensräume-Variante.<br>
 <strong>Syntax:</strong> <code>* <var>ns</var>|* *|*</code><br>
 <strong>Beispiel:</strong> <code>*</code> matcht alle Elemente des Dokuments.</dd>
 <dt><a href="/de/docs/Web/CSS/Attributselektoren">Attributselektoren</a></dt>
 <dd>Dieser grundlegende Selektor wählt Knoten anhand des Wertes eines ihrer Attribute aus.<br>
 <strong>Syntax:</strong> <code>[<var>attr</var>] [<var>attr</var>=<var>value</var>] [<var>attr</var>~=<var>value</var>] [<var>attr</var>|=<var>value</var>] [<var>attr</var>^=<var>value</var>] [<var>attr</var>$=<var>value</var>] [<var>attr</var>*=<var>value</var>]</code><br>
 <strong>Beispiel:</strong> <code>[autoplay]</code> matcht alle Elemente, deren <code>autoplay</code> Attribut (auf einen beliebigen Wert) gesetzt ist.</dd>
</dl>

<h2 id="Kombinatoren">Kombinatoren</h2>

<dl>
 <dt><a href="/de/docs/Web/CSS/Adjacent_sibling_selectors">Angrenzende Geschwisterselektoren</a></dt>
 <dd>Der <code>'+'</code>-Kombinator wählt Knoten aus, die direkt dem davor angegebenen Element folgen.<br>
 <strong>Syntax:</strong> <code><var>A</var> + <var>B</var></code><br>
 <strong>Beispiel:</strong> <code>h2 + p</code> matcht jedes {{HTMLElement('p')}}, das direkt einem {{HTMLElement('h2')}} folgt.</dd>
 <dt><a href="/de/docs/Web/CSS/General_sibling_selectors" style="">Allgemeine Geschwisterselektoren</a></dt>
 <dd>Der <code>'~'</code>-Kombinator wählt Knoten aus, die dem davor angegeben Element (nicht zwingend direkt) folgen, falls sie sich dasselbe Elternelement teilen.<br>
 <strong>Syntax:</strong> <code><var>A</var> ~ <var>B</var></code><br>
 <strong>Beispiel:</strong> <code>p ~ span</code> matcht alle {{HTMLElement('span')}} Elemente, die einem {{HTMLElement('p')}} Element innerhalb desselben Elements folgen.</dd>
 <dt><a href="/de/docs/Web/CSS/Child_selectors">Kindselektoren</a></dt>
 <dd>Der <code>'&gt;'</code>-Kombinator wählt Knoten aus, die direkte Kinder des davor angegebenen Elements sind.<br>
 <strong>Syntax:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
 <strong>Beispiel:</strong> <code>ul &gt; li</code> matcht alle {{HTMLElement('li')}} Elemente, die innerhalb eines {{HTMLElement('ul')}} Element sind.</dd>
 <dt><a href="/de/docs/Web/CSS/Descendant_selectors">Nachfahrenselektoren</a></dt>
 <dd>Der <code>' '</code>-Kombinator wählt Knoten aus, die (nicht zwangsweise direkte) Kinder des davor angegebenen Elements sind.<br>
 <strong>Syntax:</strong> <code><var>A</var> <var>B</var></code><br>
 <strong>Beispiel:</strong> <code>div span</code> matcht jedes {{HTMLElement('span')}} Element, das innerhalb eines {{HTMLElement('div')}} Elements ist.</dd>
</dl>

<h2 id="Pseudoelemente">Pseudoelemente</h2>

<p><a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a> sind Abstraktionen des Baums, die Elemente außerhalb von dem, was HTML macht, repräsentieren. Zum Beispiel hat HTML kein Element, das den ersten Buchstaben oder die erste Zeile eines Absatzes beschreibt, oder die Markierung in einer Liste. Pseudoelemente repräsentieren diese Elemente und erlauben es, ihnen CSS Regeln zuzuweisen: dadurch können diese Elemente unabhängig gestylt werden.</p>

<h2 id="Pseudoklassen">Pseudoklassen</h2>

<p><a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklassen</a> erlauben es, Elemente anhand von Informationen auszuwählen, die nicht im Dokumentbaum hinterlegt sind, wie ein Status, oder die schwer zu extrahieren sind. Z. B. ob ein Link zuvor bereits besucht wurde oder nicht.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>1</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>1.5</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>
</div>