10. Unterrichtsblock

CSS Pseudo-Klassen

Eine Pseudoklasse wird verwendet, um einen speziellen Zustand eines Elements zu definieren.

Zum Beispiel können Pseudo-Klassen verwendet werden, um:

• Element zu gestalten, wenn ein Benutzer mit der Maus darüber fährt
• Besuchte und nicht besuchte Links unterschiedlich gestalten
• Input-Element gestalten, wenn Eingaben erfolgen

Beispiel – Welche Änderungen erfolgen, wenn man mit der Maus über den folgenden Link fährt?

Fahr mit der Maus über mich

Syntax

Die Syntax von Pseudoklassen:

selektor:pseudo-klasse {
  eigenschaft: wert;
}

Anker-Pseudo-Klassen

Links können auf verschiedene Arten angezeigt werden:

Beispiel

/* Unbesuchter Link */
a:link {
  color: #FF0000;
}

/* Besuchter Link */
a:visited {
  color: #00FF00;
}

/* Maus über Link */
a:hover {
  color: #FF00FF;
}

/* Angeklickter Link */
a:active {
  color: #0000FF;
}

HINWEIS: a:hover MUSS nach a:link und a:visited in der CSS-Definition stehen, um wirksam zu sein! a:active MUSS in der CSS-Definition nach a:hover kommen, um wirksam zu sein! Bei Pseudo-Klassennamen wird die Groß-/Kleinschreibung nicht beachtet.

Pseudo-Klassen und HTML-Klassen

Pseudo-Klassen können mit HTML-Klassen kombiniert werden:

Wenn Sie den Mauszeiger über den Link im Beispiel bewegen, ändert er die Farbe:

Fahr mit der Maus über mich

Beispiel

a:hover {
  color: #000000;
}

Bewege den Mauszeiger auf <div>

Ein weiteres Beispiel für die Verwendung der :hover Pseudo-Klasse für ein <div>-Element:

Beispiel

div:hover {
  background-color: dodgerblue;
}

Einfacher Tooltip-Hover

Bewege den Mauszeiger über ein <div>-Element, um ein <p>-Element anzuzeigen (wie z.B. einen Tooltip):

p {
  display: none;
  background-color: dodgerblue;
  padding: 20px;
  color: white;
}

div:hover p {
  display: block;
}

CSS – Die :first-child Pseudo-Klasse

Die :first-child Pseudoklasse stimmt mit einem angegebenen Element überein, das das erste untergeordnete Element eines anderen Elements ist.

Übereinstimmung mit dem ersten <p>-Element

Im folgenden Beispiel stimmt der Selektor mit jedem <p>-Element überein, das das erste untergeordnete Element eines beliebigen Elements ist:

p:first-child {
  color: blue;
}

Übereinstimmung mit dem ersten <i>-Element in allen <p>-Elementen

Im folgenden Beispiel stimmt der Selektor mit dem ersten <i>-Element in allen <p>-Elementen überein:

p i:first-child {
  color: blue;
}

Abgleich von allen <i>-Elementen in allen ersten untergeordneten <p>-Elementen

Im folgenden Beispiel stimmt der Selektor mit allen <i>-Elementen in <p>-Elementen überein, die das erste untergeordnete Element eines anderen Elements sind:

p:first-child i {
  color: blue;
}

Alle CSS-Pseudoklassen

Selektor	Beispiel	Erklärung des Beispiels
:active	a:active	Spricht den aktiven Link an
:checked	input:checked	Spricht jedes angehakte Input-Element an
:disabled	input:disabled	Spricht jedes deaktivierte Input-Element an
:empty	p:empty	Spricht jedes <p> Element an, das keine Kindelemente hat
:enabled	input:enabled	Spricht jedes aktivierte Input-Element an
:first-child	p:first-child	Spricht jedes <p>-Element an, das das erste Kindelement dieses Elternelements ist
:first-of-type	p:first-of-type	Spricht jedes <p>-Element an, das das erste <p>-Element dieses Elternelements ist
:focus	input:focus	Spricht das Input-Element an, in welches geschrieben werden soll
:hover	a:hover	Spricht den Link an, über welchen die Maus fährt
:in-range	input:in-range	Wählt <input>-Elemente mit einem Wert innerhalb eines bestimmten Bereichs aus
:invalid	input:invalid	Wählt alle <input>-Elemente mit einem ungültigen Wert
:lang(language)	p:lang(it)	Wählt jedes <p>-Element aus, dessen Wert für das lang-Attribut mit „it“ beginnt
:last-child	p:last-child	Wählt jedes <p>-Element aus, das das letzte Kindelement seiner Eltern ist
:last-of-type	p:last-of-type	Wählt jedes <p>-Element aus, das das letzte <p>-Element seiner Eltern ist
:link	a:link	Wählt alle nicht besuchten Links aus
:not(selector)	:not(p)	Spricht alle Elemente an, die keine <p>-Elemente sind
:nth-child(n)	p:nth-child(2)	Wählt jedes <p>-Element aus, das das zweite Kindelement seines Elternteils ist
:nth-last-child(n)	p:nth-last-child(2)	Wählt jedes <p>-Element aus, das das zweite Kind seines Elternteils ist, beginnend mit dem letzten Kind
:nth-last-of-type(n)	p:nth-last-of-type(2)	Wählt jedes <p>-Element aus, das das zweite <p>-Element seiner Eltern ist, beginnend mit dem letzten Kind
:nth-of-type(n)	p:nth-of-type(2)	Wählt jedes <p>-Element aus, das das zweite <p>-Element seiner Eltern ist
:only-of-type	p:only-of-type	Wählt jedes <p>-Element aus, das das einzige <p>-Element seiner Eltern ist
:only-child	p:only-child	Wählt jedes <p>-Element aus, das das einzige Kind seines Elternteils ist
:optional	input:optional	Wählt <input>-Elemente ohne das Attribut „required“ aus
:out-of-range	input:out-of-range	Wählt <input>-Elemente mit einem Wert außerhalb eines bestimmten Bereichs aus
:read-only	input:read-only	Wählt <input>-Elemente mit einem „readonly“-Attribut aus
:read-write	input:read-write	Wählt <input>-Elemente ohne „readonly“-Attribut aus
:required	input:required	Wählt <input>-Elemente mit einem „required“-Attribut aus
:root	root	Wählt das Rootelement des Dokuments aus
:target	#news:target	Wählt das aktuell aktive #news-Element aus (wenn auf eine URL geklickt wird, die diesen Ankernamen enthält)
:valid	input:valid	Wählt alle <input>-Elemente mit einem gültigen Wert aus
:visited	a:visited	Selektiert alle besuchten Links

CSS Pseudo-Elemente

Ein CSS-Pseudoelement wird verwendet, um bestimmte Teile eines Elements zu stylen.

Zum Beispiel kann es verwendet werden, um:

• Gestalten Sie den ersten Buchstaben oder die erste Zeile eines Elements
• Inhalt vor oder nach dem Inhalt eines Elements einfügen

Syntax

Die Syntax von Pseudoelementen:

selector::pseudo-element {
  property: value;
}

---

Das ::first-line Pseudo-Element

Das ::first-line-Pseudo-Element wird verwendet, um der ersten Zeile eines Textes einen besonderen Stil zu verleihen.

Das folgende Beispiel formatiert die erste Textzeile in allen <p>-Elementen:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Hinweis: Das ::first-line Pseudo-Element kann nur auf Block-Level-Elemente angewendet werden.

Für das Pseudoelement gelten folgende Eigenschaften ::first-line :

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Das ::first-letter Pseudoelement

Das ::first-letter Pseudo-Element wird verwendet, um dem Anfangsbuchstaben eines Textes einen besonderen Stil zu verleihen.

Das folgende Beispiel formatiert den ersten Buchstaben des Textes in allen <p>-Elementen: 

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Hinweis: Das ::first-letter-Pseudo-Element kann nur auf Block-Level-Elemente angewendet werden.

Für das Pseudo-Element ::first-letter gelten folgende Eigenschaften: 

• font properties
• color properties 
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (nur wenn „float“ gleich „none“ ist)
• text-transform
• line-height
• float
• clear

Pseudo-Elemente und HTML-Klassen

Pseudo-Elemente können mit HTML-Klassen kombiniert werden: 

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Das obige Beispiel zeigt den Anfangsbuchstaben von Absätzen mit class="intro", in rot und in einem größeren Format.

Mehrere Pseudo-Elemente

Es können auch mehrere Pseudoelemente kombiniert werden.

Im folgenden Beispiel ist der erste Buchstabe eines Absatzes rot und hat eine xx-große Schriftgröße. Der Rest der ersten Zeile ist blau und in Kapitälchen. Der Rest des Absatzes hat die Standardschriftgröße und -farbe:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS – das ::before Pseudo-Element

Das ::before-Pseudo-Element kann verwendet werden, um etwas Inhalt vor dem Inhalt eines Elements einzufügen.
Z. B. Icons für Listen-Elemente

Das folgende Beispiel fügt vor dem Inhalt jedes <h1>-Elements ein Bild ein:

h1::before {
  content: "\2193";
}

CSS – das ::after Pseudo-Element

Das ::after-Pseudo-Element kann verwendet werden, um etwas Inhalt nach dem Inhalt eines Elements einzufügen.

Das folgende Beispiel fügt ein Bild nach dem Inhalt jedes <h1>-Elements ein:

h1::after {
  content: url(https://webentwicklerkurs.de/wp-content/uploads/2022/09/CSS-Logo-1024x1024.png);
}

CSS – Das ::marker Pseudo-Element

Das ::marker-Pseudo-Element wählt die Markierungen von Listenelementen aus.

Das folgende Beispiel gestaltet die Markierungen von Listenelementen:

• Eis
• Schokolade
• Zuckerwatte

1. Erster
2. Zweiter
3. Dritter

::marker {
  color: red;
  font-size: 23px;
}

CSS – das ::selection Pseudo-Element

Das ::selection-Pseudoelement entspricht dem Teil eines Elements, das von einem Benutzer ausgewählt wird.

Die folgenden CSS-Eigenschaften können auf angewendet werden ::selection: color, background, cursor und outline.

Das folgende Beispiel macht den ausgewählten Text rot auf gelbem Hintergrund:

::selection {
  color: red;
  background: yellow;
}

CSS Variablen

Die var()-Funktion wird verwendet, um den Wert einer CSS-Variable einzufügen.

CSS-Variablen haben Zugriff auf das DOM, was bedeutet, dass man Variablen mit lokalem oder globalem Gültigkeitsbereich erstellen, die Variablen mit JavaScript ändern und die Variablen basierend auf Medienabfragen ändern können.

Eine gute Möglichkeit, CSS-Variablen zu verwenden, ist, wenn es um die Farben des Designs geht. Anstatt dieselben Farben immer wieder zu kopieren und einzufügen, kann man sie in Variablen platzieren.

Der traditionelle Weg

Das folgende Beispiel zeigt die traditionelle Art, einige Farben in einem Stylesheet zu definieren (indem die zu verwendenden Farben für jedes spezifische Element definiert werden):

body { background-color: #1e90ff; }

h2 { border-bottom: 2px solid #1e90ff; }

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

Syntax der var()-Funktion

Die Syntax der var()-Funktion lautet wie folgt:

var(--name, wert)

Wert	Beschreibung
name	Benötigt. Der Variablen-Name (beginnt mit zwei Strichen –)
value	Optional. Der Sicherheitswert (wird verwendet, wenn die Variable nicht gefunden werden kann)

Hinweis: Der Variablenname muss mit zwei Bindestrichen (–) beginnen und es wird zwischen Groß- und Kleinschreibung unterschieden!

Wie var() funktioniert

• Zunächst einmal: CSS-Variablen können einen globalen oder lokalen Gültigkeitsbereich haben.
• Auf globale Variablen kann im gesamten Dokument zugegriffen/verwendet werden, während lokale Variablen nur innerhalb des Selektors verwendet werden können, in dem sie deklariert sind.
• Um eine Variable mit globalem Gültigkeitsbereich zu erstellen, deklarieren man diese innerhalb des :root-Selektors. Der :root-Selektor entspricht dem Root-Element des Dokuments.
• Um eine Variable mit lokalem Gültigkeitsbereich zu erstellen, deklarieren man diese innerhalb des Selektors, der sie verwenden soll.

Das folgende Beispiel entspricht dem obigen Beispiel, aber hier verwenden wir die var()-Funktion.

Zuerst deklarieren wir zwei globale Variablen (–blau und –weiss). Dann verwenden wir die var()Funktion, um den Wert der Variablen später in das Stylesheet einzufügen:

Beispiel

:root {
  --blau: #1e90ff;
  --weiss: #ffffff;
}

body { background-color: var(--blau); }

h2 { border-bottom: 2px solid var(--blau); }

.container {
  color: var(--blau);
  background-color: var(--weiss);
  padding: 15px;
}

button {
  background-color: var(--weiss);
  color: var(--blau);
  border: 1px solid var(--blau);
  padding: 5px;
}

Vorteile der Verwendung von var() sind:

• macht den Code leichter lesbar (verständlicher)
• macht es viel einfacher, die Farbwerte zu ändern

Um die blaue und weiße Farbe in ein weicheres Blau und Weiß zu ändern, müssen nur die beiden Variablenwerte geändert werden:

:root {
  --blau: #6495ed;
  --weiss: #faf0e6;
}

body { background-color: var(--blau); }

h2 { border-bottom: 2px solid var(--blau); }

.container {
  color: var(--blau);
  background-color: var(--weiss);
  padding: 15px;
}

button {
  background-color: var(--weiss);
  color: var(--blau);
  border: 1px solid var(--blau);
  padding: 5px;
}

CSS @media

Die @media (seit CSS2) Regel ermöglichte es, unterschiedliche Stilregeln für verschiedene Medientypen zu definieren.

Beispiele: Man kann einen Satz Stilregeln für Computerbildschirme haben, einen für Tablet-PCs, einen für Mobiltelefone, einen für Fernseher und so weiter.

Leider haben diese Medientypen außer dem Druckmedientyp nie viel Unterstützung von Geräten erhalten.

CSS3 eingeführte Medienabfragen

Medienabfragen in CSS3 erweiterten die Idee von CSS2-Medientypen: Anstatt nach einem Gerätetyp zu suchen, betrachten sie die Fähigkeiten des Geräts.

Medienabfragen können verwendet werden, um viele Dinge zu überprüfen, wie zum Beispiel:

• Breite und Höhe des Ansichtsfensters
• Breite und Höhe des Geräts
• Ausrichtung (ist das Tablet/Telefon im Quer- oder Hochformat?)
• Auflösung

Die Verwendung von Medienabfragen ist eine beliebte Technik zum Bereitstellen eines maßgeschneiderten Stylesheets für Desktops, Laptops, Tablets und Mobiltelefone (z. B. iPhone und Android-Telefone).

Medienabfragesyntax

Eine Medienabfrage besteht aus einem Medientyp und kann einen oder mehrere Ausdrücke enthalten, die entweder zu wahr oder zu falsch aufgelöst werden.

@media not|only medientyp and(Ausdrücke & Werte) {
  CSS-Befehle;
}

Das Ergebnis der Abfrage ist wahr, wenn der angegebene Medientyp mit dem Gerätetyp übereinstimmt, auf dem das Dokument angezeigt wird, und alle Ausdrücke in der Medienabfrage wahr sind. Wenn eine Medienabfrage wahr ist, werden das entsprechende Stylesheet oder die entsprechenden Styleregeln gemäß den normalen Kaskadierungsregeln angewendet.

Sofern man nicht die Operatoren not oder only verwendet, ist der Medientyp optional und der all-Typ wird impliziert.

Mann kann auch verschiedene Stylesheets für verschiedene Medien haben.

CSS3-Medientypen

Wert	Beschreibung
all	Wird für alle Geräte verwendet
print	Wird für Drucker verwendet
screen	Wird für Computerbildschirme, Mobiltelefone, Tablet-PCs etc. verwendet.
speech	Wird für Lesegeräte verwendet, welche die Seite laut vorlesen (Veraltet, da diese Funktion von vielen Browsern abgedeckt wird)

Einfache Beispiele für Medienabfragen

Eine Möglichkeit, Medienabfragen zu verwenden, besteht darin, einen alternativen CSS-Abschnitt direkt im Stylesheet zu haben.

Das folgende Beispiel ändert die Hintergrundfarbe in hellgrün, wenn das Ansichtsfenster 780 Pixel breit oder breiter ist (wenn das Ansichtsfenster kleiner als 780 Pixel ist, ist die Hintergrundfarbe rosa):

Beispiel

@media screen and (min-width: 780px) {
  .diff {
    background-color: lightgreen;
  }
}

Das folgende Beispiel zeigt ein Menü, das auf der linken Seite schwebt, wenn der Darstellungsbereich 780 Pixel breit oder breiter ist (wenn der Darstellungsbereich weniger als 780 Pixel beträgt, befindet sich das Menü über dem Inhalt):

@media screen and (min-width: 780px) {
  #linkeseitenleiste {width: 200px; float: left;}
  #hauptinhalt {margin-left: 216px;}
}