LU02b - Element-, Klasse-, ID-CSS-Selektoren

Dies ist eine alte Version des Dokuments!

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 zä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 Größ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.

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“>

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 zugehö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 nächsten Element beträ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>

LU02b - Element-, Klasse-, ID-CSS-Selektoren

Arten von Selektoren

Übersicht der einfachen CSS-Selektoren

HTML-Elemente mit dem Typselektor ansprechen

BZZ - Modulwiki