Dies ist eine alte Version des Dokuments!


LU02b - Element-, Klasse-, ID-CSS-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.
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 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>
  • modul/m287/learningunits/lu02/einfache-selektoren.1740724942.txt.gz
  • Zuletzt geändert: 2025/02/28 07:42
  • von kdemirci