Pseudoklassen & Selektoren | CSS

Pseudoklassen, sowie Elemente sind in CSS ein wahrer Segen. Dies ist das Beitragsbild.

Anlass für diesen Artikel war die Frage, welche Möglichkeiten ich habe über CSS eine Blockquote zu gestalten. Bisher wurden die Gänsefüßchen händisch gesetzt, doch war dies selbstverständlich nicht die optimale Lösung, weswegen ich mich nun näher mit den ganzen Pseudoklassen, sowie Pseudoelementen befasst habe die nun hier aufgelistet und näher beschrieben sind.

Der Weg ist das Ziel

– Konfuzius

Pseudoklassen für Links

Es gibt die klassischen Pseudoklassen, die hauptsächlich nur für das a-Element (Links) gelten und die verschiedenen „Stadien“ beschreiben.

  • :link – definiert einen Link, der noch nicht besucht wurde
  • :visited – definiert einen Link, der bereits geklickt wurde
  • :focus – definiert einen Link, oder ein anderes Element (zB für Formulare) die „anvisiert“ wurden, wie zum Beispiel durch die Tabulator Taste
  • :hover – definiert einen Link, oder ein anderes Element (zB ein Listenpunkt) wo sich der Mauszeiger gerade darüber befindet
  • :active – definiert einen Link, der gerade angeklickt wird (für die Dauer des Klicks)

Beispiel Mouse-Over durch Pseudoklassen

Eine Beispieldeklaration für einen blauen Link mit einem Mouseover-Effekt, welcher den Link rot werden lässt könnte demnach so aussehen:

a {color:blue;}
a:hover {color:red;}

blauer Link

Pseudoklassen für Absätze oder andere Elemente

Besonders beliebt dürften folgende Pseudoklassen (& Pseudoelemente) bei Typografie-Begeisterten, sowie Mediengestaltern/Webdesignern sein, da mit ihnen die Gestaltung von Textblöcken sehr leicht fällt. Besonders kreative Köpfe verwenden :first-child für dynamische Webseiten-Layouts, da man hiermit viel tricksen kann.

  • :first-child – definiert das erste Element in einem anderen Element
  • :last-child – definiert das letzte Element in einem anderen Element
  • :nth-child – definiert jedes beliebige Element in einem anderen Element in bestimmter Reihenfolge
  • :first-line – definiert die erste Zeile in einem Textblock
  • :first-letter – definiert den ersten Buchstaben in einem Textblock

Beispiel :first-letter

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Beispiel :first-line

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Das erste Kind :first-child

Das erste Kind eines anderen Elementes – klingt zunächst verwirrend, jedoch ist dies am leichtesten anhand einer Liste zu erklären:

Im CSS
ul li:first-child {color:red;}

Im Quelltext
<ul>
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>Dritter Listenpunkt</li>
</ul>

Ergebnis

  • Erster Listenpunkt
  • Zweiter Listenpunkt
  • Dritter Listenpunkt

Das letzte Kind :last-child

Es verhält sich, wie das :first-child, nur dass es das letzte Element anspricht

Im CSS
ul li:last-child {color:red;}

Im Quelltext
<ul>
<li>Erster Listenpunkt</li>
<li>Zweiter Listenpunkt</li>
<li>Dritter Listenpunkt</li>
</ul>

Ergebnis

  • Erster Listenpunkt
  • Zweiter Listenpunkt
  • Dritter Listenpunkt

Das X-te Kind :nth-child

Dieses Pseudoelement verhält sich wie :first-child und :last-child, nur dass man hierbei einen beliebigen Wert eintragen kann. Als Beispiel führe ich vor, dass jedes 3. Element in der folgenden Liste rot eingefärbt wird:

Im CSS
ol li:nth-child(3n) {color:red;}

Im Quelltext
<ol>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
</ol>

Ergebnis

  1. Listenpunkt
  2. Listenpunkt
  3. Listenpunkt
  4. Listenpunkt
  5. Listenpunkt
  6. Listenpunkt
  7. Listenpunkt
  8. Listenpunkt
  9. Listenpunkt

Dadurch lassen sich gerade automatisch generierte Inhalte, wie zB Blogbeiträge, die in <article>-Tags gepackt sind gut gestalten. Was aus diesen recht einfachen Techniken später wird, obliegt alleine dem Template-Entwickler. Jedoch kann ich mir gut vorstellen, dass gerade die wichtigsten Artikel gerne groß dargestellt werden und dann mit neuen Elementen ersetzt werden. Dies ermöglicht einen relativ schlanken Code, da man keine größeren Abfragen mehr machen muss, um diese in Extra Inhaltsboxen zu packen, sondern hat diese einfach chronologisch im Quelltext vorliegen.

Hier findet man noch einen →:nth-Tester von CSS-Tricks

Pseudoklasse für Sprachelemente

Durch die Pseudoklasse :lang definiert man im Style-Bereich vordefinierte Elemente, deren Sprachinhalt näher erläutert werden.

  • :lang(en) – definiert Elemente mit englischem Sprachinhalt, die jeweils so ausgezeichnet wurden
  • :lang(fr) – definiert Elemente mit französischem Sprachinhalt, die jeweils so ausgezeichnet wurden

Pseudoelemente für automatisch generierten Inhalt

Besondere Lieblinge von mir sind neuerdings die Pseudoelemente :before & :after. Diese beiden definieren, wie der Name schon verrät, Elemente, die sich vor, oder hinter einem Tag mit diesem Pseudoelement befinden. Hierbei ist es auch möglich ganzen Text, oder Grafiken vorzugeben, sodass zum Beispiel eine <Blockquote> immer Anführungszeichen mit bestimmten Style aufweist.

CSS
blockquote p
{quotes: '„' '“'; /*open-quote, close-quote*/
font-style:italic; }

blockquote p:first-child:before /*VOR der Blockquote*/
{content: open-quote; /*der ersten Anführungszeichen*/
font-size:4em;
color:#ccc;}

blockquote p:first-child:after /*die schließenden Anführungszeichen*/
{content: close-quote;
font-size:4em;
color:#ccc;
position:relative;
top:20px;}

Ergibt folgende Blockquote:

Alle sind Irre; aber wer seinen Wahn zu analysieren versteht, wird Philosoph genannt.

Ambrose Bierce

Für content: kann man hier nun auch Text einfügen, sodass dieser stets vor, oder nach dem gewünschten Element erscheint. Wie dies eingesetzt wird, obliegt mal wieder nur dem Gestalter. Für gewisse Projekte hat dies sicherlich Verwendung. Außerdem kann man auch Grafiken vor, oder nach dem Element einbinden, indem man hier content:url(/Pfad/zum/Bild.jpg); hineinschreibt.