====== LU02b - Element-, Klasse-, ID-CSS-Selektoren ====== ===== Arten von Selektoren ===== Ziel der verschiedenen Arten von Selektoren, die teilweise komplex verschachtelten HTML-Code zu erreichen (zu matchen), damit genau der beabsichtigte HTML-Abschnitt gestyled wird. Die verschiedenen CSS-Selektoren sind grob wiefolgt aufgeteilt: * **Einfache Selektoren**: Zu den einfachen Selektoren zählen der Typselektor, der Universalselektor *, der Klassenselektor .class, der ID-Selektor #id, der Attributselektor und mehrere Pseudoklassen. * **Kombinatoren**: Bei Kombinatoren handelt es sich um zwei Selektoren, die mit einem Größer-als-Zeichen E > F (Kindselektor), dem Pluszeichen E + F (Nachbarnselektor), einem Tilde-Zeichen E ~ F (Geschwisterselektor) oder einen Leerraum E F (Nachfahrenselektor) miteinander verkettet werden. ==== Übersicht der einfachen CSS-Selektoren ==== | **Selektor** | **Bezecihnung** | **Auswahl** | **HTML-Beispiel** | | element {...} | Typselektor | HTML-Element mit dem Namen element|
| | .klname | Klassenselektor | Element mit der Klasse klname |

| | #elemid | ID-Selektor | Element mit der ID elemid |

| ==== HTML-Elemente mit dem Typselektor ansprechen ==== Der Typselektor (alias Elementselektor) spricht die HTML-Elemente direkt mit dem Elementnamen an. Angewendet wird diese Regel auf alle Elemente desselben Typs im HTML-Dokument. Dabei ist es irrelevant, an welcher Stelle im HTML-Dokument diese Elemente geschrieben sind, welcher Klasse diese zugehören oder welchen Bezeichner sie haben. **Beispiel**\\ Bei den HTML-Elementen

,