Dies ist eine alte Version des Dokuments!
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 | <figure> |
.klname | Klassenselektor | Element mit der Klasse klname | <p class=„klname“> |
#elemid | ID-Selektor | Element mit der ID elemid | <p 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 <header>, <nav> und <footer> wird der Text zentriert ausgerichtet und ein schwarzer Rahmen von 1 Pixel Dicke gezogen. Der Abstand zum oberen nächsten Element beträgt bei diesen Elementen immer 5 Pixel. Alle HTML-Elemente <h1> und <abbr> werden in grauer Farbe angezeigt. Jedes HTML-Element <p> bekommt einen grauen gepunkteten Rahmen.
Beispiel eines Stylesheets mit nur Typselektoren.
/* Schwarzer Rahmen, Zentrierter Text, 5 Pixel Abstand von oben */ header, nav, footer { text-align:center; border: 1px solid black; margin-top: 5px; } /* Grauer Text */ h1, abbr { color: gray; } /* Grauer gepunkteter Rahmen */ p { border: 1px dotted gray; }
Beispiel: Der Aufruf des Stylesheets über die HTML-Seite.
<!doctype html> <html> <head> <title>Typselektoren</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header>Kopfzeile</header> <nav>Navigation</nav> <main> <h1>Typselektoren</h1> <p>Ein solcher Typselektor spricht die <abbr>HTML</abbr>-Elemente mit dem Elementnamen direkt an. </p> <p class="wichtig">Bei XML-Dokumenten muss auf die Groß- und Kleinschreibung des Selektors und dem anzusprechenden Element geachtet werden.</p> </main> <footer>Fußzeile</footer> </body> </html>