unslug de: move

3 files changed, 590 insertions, 0 deletions

diff --git a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..79ce577e7f
--- /dev/null
+++ b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,160 @@
+---
+title: Kaskadierung und Vererbung
+slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}<span class="seoSummary">Das ist der vierte Abschnitt des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.</span></p>
+
+<h2 class="clearLeft" id="Information_Kaskadierung_und_Vererbung">Information: Kaskadierung und Vererbung</h2>
+
+<p>Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.</p>
+
+<p>Drei Hauptquellen von Styleinformationen bilden eine <em>Kaskade</em>. Diese sind:</p>
+
+<ul>
+ <li>Die standardmäßigen Styles des Webbrowsers für die Markup Language.</li>
+ <li>Die Styles, die vom Benutzer, der das Dokument liest, angegeben werden.</li>
+ <li>Die Styles, die vom Autor mit dem Dokument verknüpft worden sind. Diese können an drei verschiedenen Orten angegeben werden:
+  <ul>
+   <li>In einer externen Datei: Dieses Tutorial diskutiert hauptsächlich diese Method zur Definition von Styles.</li>
+   <li>In einer Definition am Anfang des Dokumenst: Diese Methode sollte nur für Styles verwendet werden, die nur von dieser Seite benützt werden.</li>
+   <li>Auf einem bestimmten Element im Inhalt des Dokument: Das ist die am schwersten wartbare Methode, welche für Tests verwendet werden kann.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.</p>
+
+<p>Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei <code>userContent.css</code> innerhalb Ihres Browserprofils an.</p>
+
+<p>Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.</p>
+</div>
+
+<p>Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.</p>
+
+<p>Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.</p>
+
+<p>Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.</p>
+
+<p>Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.</p>
+
+<p>Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.</p>
+
+<p>Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>CSS ermöglicht es auch mit dem Schlüsselwort <code>!important</code> die Styles vom Autor zu überschreiben.</p>
+
+<p>Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.</p>
+
+<p>Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> in der CSS Spezifikation auf.</p>
+</div>
+
+<h2 id="Aktion_Vererbung_verwenden">Aktion: Vererbung verwenden</h2>
+
+<ol>
+ <li>Editieren Sie Ihre CSS Datei.</li>
+ <li>Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist:
+  <pre class="brush:css">p {
+  color: blue;
+  text-decoration: underline;
+}
+</pre>
+ </li>
+ <li>Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.<br>
+
+  <p>Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.</p>
+ </li>
+</ol>
+
+<h2 id="Before" name="Before">Davor</h2>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Inhalt">CSS Inhalt</h3>
+
+<pre class="brush: css">strong {
+  color:red
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Before') }}</p>
+
+<h2 id="After" name="After">Danach</h2>
+
+<h3 id="HTML_Inhalt_2">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;</pre>
+
+<h3 id="CSS_Inhalt_2">CSS Inhalt</h3>
+
+<pre class="brush:css" dir="rtl">p {
+  color:blue;
+  text-decoration:underline;
+}
+
+strong {
+  color:red;
+}</pre>
+
+<p>{{ EmbedLiveSample('After') }}</p>
+
+<p> </p>
+
+<div class="tuto_example">
+<div class="tuto_type">Herausforderung</div>
+Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind:
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Mögliche Lösung</div>
+
+<p>Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:</p>
+
+<pre class="brush: css">p {
+  color: blue;
+}
+
+strong {
+  color: red;
+  text-decoration: underline;
+}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
+<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
+
+<p> </p>
+
+<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
+
+<p>{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <code>&lt;p&gt;</code> und <code>&lt;strong&gt;</code>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch <a href="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren" title="/de/docs/Web/Guide/CSS/Getting_Started/Selektoren">selektivere Art</a> angeben können.</p>
diff --git a/files/de/learn/css/building_blocks/selectors/index.html b/files/de/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..f61b8bb577
--- /dev/null
+++ b/files/de/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,430 @@
+---
+title: Selektoren
+slug: Web/Guide/CSS/Getting_started/Selektoren
+translation_of: Learn/CSS/Building_blocks/Selectors
+translation_of_original: Web/Guide/CSS/Getting_started/Selectors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Kaskadierung_und_vererbung", "Kaskadierung &amp; Vererbung")}}<span class="seoSummary">Das ist der fünfte Abschnitt des <a href="/de/docs/Web/Guide/CSS/Getting_Started" title="/de/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.</span></p>
+
+<h2 class="clearLeft" id="Information_Selektoren">Information: Selektoren</h2>
+
+<p>CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:</p>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+</pre>
+
+<p>In der CSS Terminologie ist die gesamte Zeile eine <em>Regel</em>. Diese Regel beginnt mit <code>strong</code>, welches ein <em>Selektor</em> ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>Der Teil innerhalb der geschwungenen Klammern ist die <em>Deklaration</em>.</p>
+
+<p>Das Schlüsselwort <code>color</code> ist eine <em>Eigenschaft (Property)</em> und <code>red</code> is ein <em>Wert (value)</em>.</p>
+
+<p>Das Semicolon nach dem Property-Value Pair trennt es von anderen Property-Value Pairs in derselben Deklaration.</p>
+
+<p>Dieser Tutorial bezeichnet einen Selektor wie <code>strong</code> als einen <em>Tag</em>-Selektor. Die CSS Spezifikation bezeichnet es als <em>Type</em>-Selector.</p>
+</div>
+
+<p>Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.</p>
+
+<p>Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.</p>
+
+<p>Zwei Attribute haben einen speziellen Status in CSS. Diese sind <a href="/de/docs/Web/HTML/Global_attributes#attr-class" title="/de/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> und <a href="/de/docs/Web/HTML/Global_attributes#id" title="/de/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
+
+<h3 id="Class_Selektoren">Class Selektoren</h3>
+
+<p>Verwenden Sie das <a href="/de/docs/Web/HTML/Global_attributes#attr-class" title="/de/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.</p>
+
+<p>Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.</p>
+
+<h3 id="ID_Selektoren">ID Selektoren</h3>
+
+<p>Verwenden Sie das <a href="/de/docs/Web/HTML/Global_attributes#id" title="/de/docs/Web/HTML/Global_attributes#id"><code>id</code></a> Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.</p>
+
+<p>Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+Dieser HTML Tag hat ein <code>class</code> Attribut und ein <code>id</code> Attribute:
+
+<pre class="brush: html">&lt;p class="key" id="principal"&gt;
+</pre>
+
+<p>Der <strong>id</strong> Wert, <code>principal</code>, muss innerhalb vom Dokument eindeutig, aber andere Tags Dokument dürfen denselben K<strong>lassennamen</strong>, <code>key</code>, haben.</p>
+
+<p>In einem CSS Stylesheet macht diese Regel alle Elemente mit der class <code>key</code> grün. (Sie müssen dazu kein {{ HTMLElement("p") }} sein.)</p>
+
+<pre class="brush: css">.key {
+  color: green;
+}
+</pre>
+
+<p>Diese Regel macht das eine Element mit der <strong>id</strong> <code>principal</code> fettgedruckt:</p>
+
+<pre class="brush: css">#principal {
+  font-weight: bolder;
+}
+</pre>
+</div>
+
+<p>Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>Sie können Selektoren kombinieren, um einen selektiveren Selektor zu erstellen.</p>
+
+<p>Der Selektor <code>.key</code> zum Beispiel selektier alle Elements mit der Klasse <code>key</code>. Der Selektor <code>p.key</code> selektiert nur {{ HTMLElement("p") }} Elemente, die die Klasse <code>key</code> haben.</p>
+
+<p>Sie sind nicht auf die zwei speziellen Attribute <code>class</code> und <code>id</code> eingeschränkt. Mit eckigen Klammern können Sie auch andere Attribute spezifizieren. Der Selektor <code>[type='button']</code> zum Beispiel selektiert alle Elemente, die ein <code>type</code> Attribut mit dem Wert <code>button</code> haben.</p>
+</div>
+
+<p>Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.</p>
+
+<p>Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.</p>
+
+<h3 id="Pseudo-classes_Selektoren">Pseudo-classes Selektoren</h3>
+
+<p>Eine CSS <a href="/de/docs/Web/CSS/Pseudo-classes" title="/de/docs/Web/CSS/Pseudo-classes">pseudo-class</a> ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. {{ Cssxref(":hover") }} zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.</p>
+
+<p>Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf  der Navigation ({{ cssxref(":visited") }}, zum Beispiel), dem Zustand seines Inhalt (wie {{ cssxref(":checked") }} auf manchen form Elementen) oder der Position des Mauszeigers (wie {{ cssxref(":hover") }} das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a> zu finden.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Syntax</div>
+
+<pre class="brush:css">selector:pseudo-class {
+  property: value;
+}
+</pre>
+</div>
+
+<h4 id="Liste_von_pseudo-classes">Liste von pseudo-classes</h4>
+
+<ul>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li>{{ Cssxref(":nth-last-child") }}</li>
+ <li>{{ Cssxref(":nth-of-type") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+</ul>
+
+<h2 id="Information_Selektoren_basieren_auf_Beziehungen">Information: Selektoren basieren auf Beziehungen</h2>
+
+<p>CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.</p>
+
+<table id="relselectors">
+ <caption>Gängige Selektoren basierend auf Beziehungen</caption>
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>Selektor</strong></td>
+   <td><strong>Selektiert</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td>Jedes E Element, das ein <em>Nachfolger</em> eines A Elements ist (das heißt: ein Kind oder ein Kind eines Kindes, <em>etc</em>.)</td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td>Jedes E Element, das ein Kind eines A Elements ist</td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td>Jedes E Element, das das erste Kind seines Parent ist</td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td>Jedes E Element, das das nächste S<em>ibling</em> eines B Elements ist (das heißt: das nächste Kind von demselben Parent)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.</p>
+
+<p>Sie können auch das Symbol <code>*</code> (asterisk) verwenden, welches "jedes Element" bedeutet.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Beispiel</div>
+
+<p>Eine HTML Tabelle hat ein <code>id</code> Attribute aber die Zeilen und Zellen haben keinen eigenen Identifier:</p>
+
+<pre class="brush: html">&lt;table id="data-table-1"&gt;
+...
+&lt;tr&gt;
+&lt;td&gt;Prefix&lt;/td&gt;
+&lt;td&gt;0001&lt;/td&gt;
+&lt;td&gt;default&lt;/td&gt;
+&lt;/tr&gt;
+...
+</pre>
+
+<p>Diese Regeln machen die erste Zelle jeder Zeile fettgedruckt und die zweite Zelle jeweils monospaced. Sie betreffen nur eine bestimmte Tabelle im Dokument:</p>
+
+<pre class="brush:css">#data-table-1 td:first-child {
+  font-weight: bolder;
+}
+
+#data-table-1 td:first-child + td {
+  font-family: monospace;
+}
+</pre>
+
+<p>Das Ergebnis sieht so aus:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table style="margin-right: 2em; width: 18em;">
+     <tbody>
+      <tr>
+       <td><strong>Prefix</strong></td>
+       <td><code>0001</code></td>
+       <td>default</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Mehr Details</div>
+
+<p>Wenn Sie einen Selektor spezifischer machen, erhöhen Sie normalerweise seine Priorität.</p>
+
+<p>Wenn Sie diese Technik anwenden, können Sie es vermeiden vielen Tags in ihrem Dokument ein <code>class</code> oder ein <code>id</code> Attribut zu geben. Stattdessen erledigt CSS die Arbeit.</p>
+
+<p>In umfassenden Designs, bei denen Geschwindigkeit wichtig ist, können Sie ihre Stylesheets effizienter machen, indem Sie komplexe Regeln mit Beziehungen zu anderen Elementen vermeiden.</p>
+
+<p>Mehr Beispiele zu <a href="/de/docs/Web/Guide/CSS/Getting_Started/Tables" title="/de/docs/Web/Guide/CSS/Getting_Started/Tables">Tabellen</a> finden Sie auf der CSS Referenzseite.</p>
+</div>
+
+<h2 id="Aktion_class_und_ID_Selektoren_verwenden">Aktion: class und ID Selektoren verwenden</h2>
+
+<ol>
+ <li>Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.</li>
+ <li>Danach setzen Sie ein <strong>id</strong> und <strong>class</strong> Attribut auf den ersten Absatz und ein <strong>id</strong> Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit:
+  <pre class="brush:css">strong {
+  color: red;
+}
+
+.carrot {
+  color: orange;
+}
+
+.spinach {
+  color: green;
+}
+
+#first {
+  font-style: italic;
+}
+</pre>
+ </li>
+ <li>Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen:
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.</p>
+
+  <p>Die class Selektoren <code>.carrot</code> und <code>.spinach</code> haben Priorität gegenüber dem tag Selektor <code>strong</code>.</p>
+
+  <p>Der ID Selektor <code>#first</code> hat Priorität gegenüber den class und den tag Selektoren.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Herausforderungen</div>
+
+<ol>
+ <li>Ohne die HTML Datei zu verändern, fügen sie eine einzige Regel in Ihrer CSS Datei hinzu, die die Farbe aller Anfangsbuchstaben wie jetzt beibehält aber alle anderen Buchstaben im zweiten Absatz blau macht:
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>Ändern sie jetzt die neue Regel (ohne etwas anderes zu ändern), um den ersten Absatz auch blau zu machen:
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Mögliche Lösung</div>
+
+<ol>
+ <li>Fügen Sie eine Regel mit dem ID Selektor <code>#second</code> und einer Deklaration <code>color: blue;</code> wie unten dargestellt hinzu:
+
+  <pre class="brush: css">#second {
+  color: blue;
+}
+</pre>
+  Ein noch spezifischerer Selektor <code>p#second</code> funktioniert auch.</li>
+ <li>Ändern Sie den Selektor der neuen Regel auf <code>p</code>, damit er ein Tag-Selektor ist:
+  <pre class="brush: css">p {
+  color: blue;
+}
+</pre>
+ </li>
+</ol>
+<a class="hideAnswer" href="#challenge">Lösung ausblenden</a></div>
+<a href="#tutochallenge" title="Eine mögliche Lösung für die Herausforderung darstellen">Sehen Sie sich die Lösung an.</a></div>
+
+<h2 id="Aktion_pseudo-classes_Selektoren_verwenden">Aktion: pseudo-classes Selektoren verwenden</h2>
+
+<ol>
+ <li>Erstellen Sie eine HTML Datei wie folgt:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit:
+  <pre class="brush: css">a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+</pre>
+ </li>
+ <li>Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen):
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h2 id="Aktion_Selektoren_basierend_auf_Beziehungen_und_pseudo-classes_verwenden">Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden</h2>
+
+<p>Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel <strong>reine CSS Dropdown Menüs</strong> zu erstellen (die nur aus CSS ohne <a href="/de/docs/Web/JavaScript" title="de/docs/Web/JavaScript">JavaScript</a> bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:</p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}</pre>
+
+<p>Angewendet auf eine HTML Struktur wie die folgende:</p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Sehen sie in das komplette <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-basierte Dropdown Menü Beispiel</a> für mögliche Hinweise.</p>
+
+<h2 id="Was_kommt_als_Nächstes">Was kommt als Nächstes?</h2>
+
+<p>Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um <a href="/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS" title="/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS">CSS leichter lesbar</a> zu machen.{{nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}</p>
diff --git a/files/de/learn/css/building_blocks/werten_einheiten/index.html b/files/de/learn/css/building_blocks/values_and_units/index.html
index 8c45b5ba69..8c45b5ba69 100644
--- a/files/de/learn/css/building_blocks/werten_einheiten/index.html
+++ b/files/de/learn/css/building_blocks/values_and_units/index.html