MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Im dritten Teil über die Selektoren behandeln wir Pseudo-Selektoren — die an sich per se keine HTML-Elemente bestimmen, sondern bestimmte Bestandteile von HTML-Elementen oder  HTML-Elemente in bestimmten Kontexten. Sie tauchen in zwei Hauptvarianten auf, als Pseudo-Klassen und als Pseudo-Elemente.

1. Pseudo-Klassen

Eine CSS Pseudo-Klasse ist ein Schlüsselwort, dem ein Doppelpunkt (colon, :) vorangeht und dann so an bereits bestehende Selektoren angehängt wird, um damit näher zu bestimmen, dass Sie die solcherart ausgewählten HTML-Elemente nur dann formatieren wollen, wenn diese in einem bestimmten Zustand sind. - So können Sie etwa ein HTML-Element nur dann formatieren, wenn Sie mit dem Mauszeiger darüber schweben (hovered over), oder eine Checkbox, wenn sie disabled oder gechecked ist, oder ein HTML-Element, dass das erste Kind seiner Eltern im DOM-Baum ist. Hier die Auflistung aller Pseudo-Klassen:

Wir werden jetzt nicht in jede Pseudo-Klasse reinschauen — da es nicht Ziel einer Lernumgebung ist, Ihnen alles bis ins kleinste Detail beizubringen, denn Sie werden gewißlich einige davon an passenderer Stelle bedarfsgerecht weit detaillierter kennenlernen, als jetzt angebracht wäre.

Beispiel einer Pseudo-Klasse

So soll uns ein einfaches Beispiel jetzt nur zeigen, wie man sie verwendet. Zunächst ein HTML Fragment:

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

Danach einige CSS Regeln:

/* Diese Regeln formatieren unseren Link für jeden Zustand */
a {
  color: blue;
  font-weight: bold;
}

/* Bereits angeklickte, also besuchte (visited) Links sollen die gleiche
Farbe wie unbesuchte haben */
a:visited {
  color: blue;
}

/* Der Link soll aber markiert werden, wenn man mit der Maus
darüberfährt (hovered), er durch anklicken aktiviert wird (activated)
oder den Eingabefokus der Tastatur erhalten hat. */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

und jetzt spielen wir ein wenig mit dem Link, den wir gerade gestaltet haben!

Mitmachen: Eine zebragestreife Infoliste

Nun sind Sie wieder dran — und in dieser Übung möchten wir, dass Sie einer Liste von Infolinks einige Zebrastreifen hinzufügen, und dazu passende Pseudo-Klassen, um die Links verschieden darzustellen, wenn man mit der Maus darüber fährt. Dazu brauchen Sie jedoch nur die letzten drei Regeln der Übungsvorlage zu bearbeiten. Folgende Hinweise geben wir Ihnen noch mit:

  1. Sie haben bereits mitbekommen, wie man die zweite Pseudo-Klasse für hover styles notiert.
  2. Für den Zebrastreifen brauchen Sie eine Pseudo-Klasse wie :nth-of-type(), die den beiden Farbregeln eine etwas unterschiedliche Version einer Pseudo-Klasse zuordnet, um damit die gerade und ungerade nummerierten Listenelemente zu gestalten. Mal sehen, wie Sie damit klarkommen :)

Sollten Sie Fehler machen, hilft der Klick auf die Reset Schaltfläche. Wenn Sie genervt aufgeben möchten, verleiht Ihnen der Klick auf Show solution schnell Klarheit über eine mögliche Lösung:

2. Pseudo-Elemente

Pseudo-Elemente sind fast wie Pseudo-Klassen, weisen aber Unterschiede dazu auf. Diesen Schlüsselworten gehen gleich zwei Doppelpunkte voran (::) — die wiederum an Selektoren angehängt werden, um einen bestimmten Teil eines HTML-Elementes näher zu bezeichnen bzw. auszuwählen. Hier eine Auflistung:

Jedes dieser Schlüsselworte hat ein besonderes Verhalten und auch interessante Möglichkeiten, aber darin einzutauchen würde die Einführung überfordern.

Beispiel für ein Pseudo-Element

Hier zeigen wir nur ein einfaches CSS Beispiel, dass genau den Raum nach allen absoluten Links bestimmt und ein Pfeilsymbol in diesen Raum einträgt:

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> Definition im MDN Glossar.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> Definition im MDN Glossar.</li>
</ul>

Fügen wir diese CSS Regel mal hinzu:

/* Alle Elemente mit einem "href"-Attribut, deren Werte mit
   "http" beginnen, erhalten ein Pfeilsymbol nach ihrem Inhalt(stext),
   um anzuzeigen, dass es sich um einen externen Verweis handelt. */
[href^=http]::after {
  content: '⤴';
}

dann erhalten wir dieses Resultat:

Mitmachen: A fancy paragraph

Diesmal geht es um die kreative Gestaltung eines Absatzes! Alles was Sie hier dafür tun müssen, ist die Anwendung der beiden Regeln (rulesets) auf die erste Zeile des Absatzes - und auf den ersten Buchstaben, wofür wir die Pseudo-Elemente ::first-line und ::first-letter verwenden. - Dadurch wird die erste Zeile des Absatzes in Versalien gestaltet und der erste Buchstabe als (nice drop cap), was dem Ganzen ein würdiges Aussehen verleiht :)

Sollten Ihnen unschädliche Fehler unterlaufen, so befreit der Klick auf die Reset Schaltfläche davon. Wollen Sie aber entnervt aufgeben, dann verleiht Ihnen der Klick auf Show solution die nötige Befreiung und zeigt eine mögliche Lösung:

Eine Runde weiter...

Wir werden unsere Einführung in die CSS Selektoren mit einem Ausblick auf Kombinatoren und mehrfache Selektoren beschliessen.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Kammreiter
 Zuletzt aktualisiert von: Kammreiter,