29:null 2a:["$","title",null,{"children":"Interaktivitäts-Strategie 1: CSS-Pseudo-Klassen | CAS Datenvisualisierung | Observable"}] 2f:T5eb,

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

30:[] 2d:{"id":"3be543154bf36dcc","slug":"interaktivitats-strategie-1-css-pseudo-klassen","title":"Interaktivitäts-Strategie 1: CSS-Pseudo-Klassen","thumbnail":"23263c6ef7ba2b9e63ad0fc19ad2288049f1440cebb3de8be8e3474b0d47282b","access_level":"public","create_time":"$D2022-05-11T17:39:06.489Z","update_time":"$D2022-05-16T08:14:55.581Z","view_time":null,"first_public_time":"$D2022-05-16T07:15:54.452Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024"},"version":113,"publish_version":113,"role":null,"authored":false,"authors":[{"type":"individual","id":"6955dde3639cf543","login":"xeophin","name":"xeophin","avatar_url":"https://avatars-next.observableusercontent.com/10a77e12b3f5cd7251ec4b1e8d2bdfa60ab72843bc51c7c80a235701f9e6383c","tier":null}],"members":[{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","role":"editor"},{"type":"individual","id":"6955dde3639cf543","login":"xeophin","name":"xeophin","avatar_url":"https://avatars-next.observableusercontent.com/10a77e12b3f5cd7251ec4b1e8d2bdfa60ab72843bc51c7c80a235701f9e6383c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"f8c1f5785a4ad7d5","slug":"5b-interaktive-grafiken","title":"5c Interaktive Grafiken","owner":{"id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung"}},"type":"notebook","body":{"title":"Interaktivitäts-Strategie 1: CSS-Pseudo-Klassen","cells":[{"id":0,"value":"# Interaktivitäts-Strategie 1: CSS-Pseudo-Klassen","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"Schon mit CSS alleine ist es möglich, einfache interaktive Elemente zu bauen.\n\nIn den meisten Fällen wird es verwendet, um das Aussehen von Elementen zu verändern, wenn der Mauszeiger über dem Element platziert ist. Dies wird als _Hover_ bezeichnet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"\n\n

Dieser Text wird blau, wenn der Mauszeiger darauf zeigt

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"`:hover` ist eine **Pseudoklasse**.\n\nPseudoklassen beginnen jeweils mit einem `:`. Sie erlauben es, HTML-Elemente ein spezifisches Aussehen zu geben, während diese in einem speziellen Zustand sind.\n\n- `:hover`: Mauszeiger befindet sich über dem Element\n- `:link`: Ein Hyperlink, der noch nicht besucht wurde\n- `:visited`: Ein Hyperlink, der schon besucht wurde (verantwortlich für die violette Farbe bei schon besuchten Links)\n\nAndere Pseudoklassen beschreiben den Zustand von Formular-Elementen:\n\n- `:checked`: Ein Ankreuzfeld, das angekreuzt wurde\n- `:valid`: Die Eingabe in einem Formularfeld ist korrekt\n- `:invalid`: Mit der Eingabe in einem Formularfeld gibt es ein Problem.\n\nUnd wiederum andere Pseudoklassen erlauben es, innerhalb der HTML-Elementhierarchie spezifische Elemente herauszupicken:\n\n- `:first-child`: Das erste Element.\n- `:last-child`: Das letzte Element.\n- `:nth-child()`: Jedes n-te Element ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$2f","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"Durch geschickte Kombination von Selektoren und Pseudoklassen können so interessante Effekte erzielt werden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"\n\n

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"Und man kann damit natürlich auch Dinge aus- und einblenden:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"\n\n

Eine Nachricht in Geheimtinte!

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"Oder, etwas realistischer:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"

The answer to everything

\n\n\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"