![\"\"](\"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-content\/uploads\/2024\/08\/class270824.png\")
\n\n
Das globale class-Attribut ist eine durch Leerzeichen getrennte Liste von Registern der abh\u00e4ngigen Klassen des Elements. Klassen erm\u00f6glichen die Auswahl und den Zugriff von CSS und Javascript mithilfe von Klassenselektoren oder Funktionen wie den DOM-Methoden document.getElementsByClassName. Entwickler verwenden st\u00e4ndig das class-Attribut. Dies erleichtert nicht nur das Styling, sondern hilft Ihnen auch dabei, Ihren Code besser zu organisieren und ihn einfacher zu warten.<\/p>\n
<\/p>\n
\n\n
Beispiel 1<\/strong><\/span><\/p>\n Einem Element k\u00f6nnen, getrennt durch Leerzeichen, eine oder mehrere Klassen zugeordnet werden.<\/p>\n Beispiel 2<\/strong><\/span><\/p>\n Beispiel 3<\/strong><\/span><\/p>\n Beispiel 4<\/strong><\/span><\/p>\n Komplexe Selektoren in CSS: In manchen F\u00e4llen m\u00fcssen wir eine Klasse nur auf ein bestimmtes HTML-Tag anwenden und alle anderen ignorieren.<\/p>\n Beispiel 5<\/strong><\/span><\/p>\n Das globale class-Attribut ist eine durch Leerzeichen getrennte Liste von Registern der abh\u00e4ngigen Klassen des Elements. Klassen erm\u00f6glichen die Auswahl und den Zugriff von CSS und Javascript mithilfe von Klassenselektoren oder Funktionen wie den DOM-Methoden document.getElementsByClassName. Entwickler verwenden st\u00e4ndig das class-Attribut. Dies erleichtert nicht nur das Styling, sondern hilft Ihnen auch dabei, Ihren Code besser zu organisieren und ihn einfacher zu warten.<\/p>\n","protected":false},"author":1,"featured_media":57,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[15,16,13,43],"class_list":{"0":"post-56","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlverstka","8":"category-programmirovanie","9":"tag-class","10":"tag-css","11":"tag-html","12":"tag-selektoren"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":5,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":303,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/posts\/56\/revisions\/303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/media\/57"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/deu\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n<p class="note editorial">Above point sounds a bit obvious. Remove\/rewrite?<\/p>\r\n<p>Narrator: I must warn you now folks that this beginning is very exciting.<\/p>\r\n<p class="note">[Lights go up and wind blows; Caspian enters stage right]<\/p>\r\n<\/pre>\n
\r\n<!-- Eine Klasse -->\r\n<div class="container">\r\n<!-- ... -->\r\n<\/div>\r\n<!-- Mehrere Klassen -->\r\n<div class="container special-box">\r\n<!-- ... -->\r\n<\/div>\r\n<\/pre>\n
\r\n.highlighted-text {\r\nbackground-color: yellow;\r\nfont-size: 18px;\r\n}<\/pre>\r\n<span class="highlighted-text">Dieser Text wird hervorgehoben.<\/span>\r\n\r\n<\/pre>\n\r\nconst elements = document.querySelectorAll('.clickable');\r\nelements.forEach(element => {\r\nelement.addEventListener('click', () => {\r\nalert('Weinen!');\r\n});\r\n});\r\n\r\n<button class="click">N\u00e4chste<\/button>\r\n<\/pre>\n\r\n\/* Nur Elemente <p> mit Klasse special-text *\/\r\np.special-text {\r\ncolor: blue;\r\n}\r\n\r\n<p class="special-text">Dieser Text wird blau sein.<\/p>\r\n<div class="special-text">Und dieser wird unver\u00e4ndert bleiben.<\/div>\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"