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>
Klassenselektor
Mit dem Klassenselektor werden HTML-Elemente gewählt, die zu einer bestimmten Klasse gehören. Ein bestimmten Klassennamen wird mit dem globalen HTML-Attribut class für (fast) alle Elemente vergeben
Beispiel
Das HTML-Element <p> wird mit dem Klassennamen <hinweis> selektiert, indem der Klassenname mit einem Punkt getrennt (ohne Leerzeichen) direkt hinter den Typselektor gesetzt wird.
HTML-Code:
<p class="hinweis">Ein Absatztext ...</p>
CSS-Code nur auf p-HTML-Elemente anwendbar:
p.hinweis { color: red; }
oder CSS-Code auf jedes HTML-Elemente anwendbar:
.hinweis { color: red; }