Willkommen zurück alle.
Heute werden wir sehr kurz über Pseudoklassen und -elemente sprechen.
So haben wir während des gesamten Kurses mit verschiedenen Arten von Elementen gearbeitet
und wie wir sie strukturieren und stylen können.
Nun, Pseudo-Elemente unterscheiden sich irgendwie von den anderen Dingen, die
wir zuvor gesehen haben, darin, dass sie sehr abhängig von der DOM-Struktur sind, und
einige von ihnen sind tatsächlich dynamisch bevölkert.
Also, um ehrlich zu sein, Sie haben das schon früher gesehen, als wir über
Styling-Links gesprochen haben, weil die Links diese verschiedenen Zustände hatten.
Ein Beispiel, das wir verwendet haben, war die Idee des Hovers.
Wenn Sie den Mauszeiger über einen Link bewegen, können Sie den Stil ändern, um möglicherweise die Unterstreichung loszuwerden oder
die Farbe zu ändern.
Lassen Sie uns also über einige dieser verschiedenen Arten von Pseudo-Klassen sprechen, die über
das hinausgehen, was Sie mit nur einem Link tun können.
Ich habe mit dem angefangen, den wir vorher gesehen haben.
Sie können einen Link und auch einen Link haben, der besucht wurde.
Sie können auch auf verschiedene Benutzeraktionen reagieren.
Wenn also jemand über einen Absatz schwebt oder mit dem
Mauszeiger über ein H1-Tag fährt, können Sie trotzdem darauf reagieren.
Es muss nicht nur ein Link sein.
Sie können auch aktiv sein, und
aktiv ist, wenn Sie die Maustaste über eine Art von Element halten.
Und der letzte ist der Fokus.
Fokus wäre, wenn jemand Tabbing durch die Seite
können Sie den Fokus auf jede von ihnen setzen.
Schließlich ist eine, die viel Sinn macht und Sie wahrscheinlich vorher gesehen haben
, dass Sie die Pseudoklassen von Formularen oder Schnittstellen wählen können.
Wenn das Kontrollkästchen angeklickt oder
deaktiviert wurde, können Sie sehen, dass sie es manchmal gelb machen.
Oder wenn Sie jemals auf einer Website waren und Sie nicht berechtigt sind, etwas einzugeben,
bis Sie etwas in ein Feld oben eingeben, höher in, neigen sie dazu, es auszugrauen.
Die Art und Weise, wie du das machst, ist, du könntest sagen, weißt du was?
Wenn jemand über meinen Absatz schwebt, möchte ich nur eine Grenze machen.
Rand:1 px
Nun, obwohl es keinen Platz auf dem DOM gibt, wo sie p: hover haben,
sollte es für Sie funktionieren, wenn Sie diese Styling-Regel einfügen.
So können Sie auch Stil basierend auf der strukturellen Position
der verschiedenen Elemente.
Sie haben das erste Kind, letztes Kind, nth-Kind.
Die Art und Weise, wie man arbeitet, ist, dass man eine Zahl einsetzt, um das fünfte Kind oder
das zehnte Kind zu sagen.
Du kannst nur ein Kind haben.
Sie haben auch andere verschiedene Dinge, wie First-of-Type, Last-of-Type,
Only-of-Type.
Und wieder haben Sie nur das Element, den Doppelpunkt und
dann den Namen der Pseudo-Klasse, die Sie stylen möchten.
Pseudo-Elemente sind nicht notwendigerweise Teil des DOM, aber
sie können verwendet werden, um bestimmte oder eindeutige Teile der Seite zu formatieren.
Wenn Sie also einen Absatz haben und diesen ausgefallenen
ersten Buchstaben mit einer anderen Schriftart einfügen möchten, können Sie das Pseudo-Element des ersten Buchstabens verwenden.
Gleich mit der ersten Zeile können Sie Dinge erzeugen, die vor oder
nach Elementen angezeigt werden.
Viele Male, wenn Sie etwas wie Kreditkarteninformationen stylen,
können Sie voran gehen und in die verschiedenen Arten von Kreditkarten setzen, aber
haben Sie ein wenig, bevor das sagt, und hey, setzen Sie ein Bild hier hinein.
Sie können auch nur Fragmente mit verschiedenen Auswahlen formatieren.
Jetzt habe ich Ihnen nicht viel Code gegeben, als wir hier durchgingen, weil die wirklich Verwendung von
Pseudoklassen und Pseudoelementen für die Seite sehr einzigartig ist, die Sie machen werden.
Wenn wir also später über Tabellen sprechen, halten Sie Ausschau, weil ich
dort viele Pseudoklassen und Pseudoelemente verwenden werde.
Es ist wirklich wichtig zu erkennen, dass ich nicht in der Lage sein werde,
jede Kombination von allem, über die wir lernen, abzudecken.
Aber ich möchte Ihnen die Tools geben, damit Sie gehen und
untersuchen können, wie Sie Ihrer Seite einige coole neue Stile hinzufügen können.
Viel Glück.