{"id":231,"date":"2023-06-12T15:58:19","date_gmt":"2023-06-12T15:58:19","guid":{"rendered":"https:\/\/math-brownies.de\/?p=231"},"modified":"2023-10-20T13:40:46","modified_gmt":"2023-10-20T13:40:46","slug":"css-selektoren","status":"publish","type":"post","link":"https:\/\/math-brownies.de\/index.php\/2023\/06\/12\/css-selektoren\/","title":{"rendered":"CSS-Selektoren"},"content":{"rendered":"\n\n\n

Ich wei\u00df schon seit langem, dass man in CSS Klassen, Elemente und IDs ansteuern kann. Ein Element steuert man \u00fcber den entsprechenden Elementnamen an, eine Klasse \u00fcber .klassenname und eine ID \u00fcber #idname. Ich wusste auch, dass man diese Anweisungen kombinieren kann, so ruft z.B. der folgende Code alle Abs\u00e4tze, die die Klasse „liste“ haben und gibt ihnen eine rote Farbe.<\/p>\n\n\n\n

p.liste {color:red;}<\/code><\/pre>\n\n\n\n
Neu dazu gelernt habe ich heute, dass man auch andere html-Attribute als Selektor nehmen kann: Daf\u00fcr benutzt man eckige Klammern. ZUm Beispiel so:<\/p>\n\n\n\n
[title=\"anfang\"] {color:red;}<\/code><\/pre>\n\n\n\n
Das gibt allen Elementen, die als titel-Attribut den String „anfang“ haben, eine rote Farbe.<\/p>\n\n\n\n
Au\u00dferdem habe ich mein Wissen \u00fcber die Zustands-Selektoren vertieft. Solche Selektoren werden mit Doppelpunkt aufgerufen, z.B. a:hover. Damit ruft man alle Links auf, \u00fcber die man gerade mit der Maus hovert. Es gibt noch etliche anderer dieser Doppelpunkt-Selektoren, sie hei\u00dfen korrekt Pseudo-Klassen-Selektoren. Ein sehr cooles Cheat-Sheet gibt es hier.<\/a><\/p>\n\n\n\n
Man kann auch alle Elemente innerhalb eines bestimmten Elternelements ansteuern. Das geht so:<\/p>\n\n\n\n
h3>a {color: red}\n<\/code><\/pre>\n\n\n\n
Damit f\u00e4rbt man dann alle Links, die in einem h3 liegen, rot ein. Man kann auch das h3 einschr\u00e4nken, indem man z.B. nur h3 einer bestimmten Klasse ansteuert. Hat man zwei Klassen als Bedingung, kann man diese \u00fcbrigens (weiter mit dem Punkt) aneinander h\u00e4ngen.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ich wei\u00df schon seit langem, dass man in CSS Klassen, Elemente und IDs ansteuern kann. Ein Element steuert man \u00fcber den entsprechenden Elementnamen an, eine Klasse \u00fcber .klassenname und eine ID \u00fcber #idname. Ich wusste auch, dass man diese Anweisungen kombinieren kann, so ruft z.B. der folgende Code alle Abs\u00e4tze, die die Klasse „liste“ haben […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[12,11,3],"tags":[20],"class_list":["post-231","post","type-post","status-publish","format-standard","hentry","category-css","category-html","category-informatik","tag-css"],"_links":{"self":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":3,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/231\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/posts\/231\/revisions\/236"}],"wp:attachment":[{"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/media?parent=231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/categories?post=231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/math-brownies.de\/index.php\/wp-json\/wp\/v2\/tags?post=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}