modul:m287:learningunits:lu02:spezielle-selektoren

Dies ist eine alte Version des Dokuments!


LU02c - Spezielle Selektoren

Mit dem Universalselektor werden alle HTML-Elemente auf einmal in einem Dokument markiert. Der Universalselektor wird mit dem Sternchen * notiert.

Beispiel 1
Der folgende Universal-Selektor setzt überall einen gepunkteten grünen Rahmen.

/* Grüner, gepunkteter Rahmen für alle Elemente */
* { 
  margin: 5px;
  padding: 3px;
  border: 2px dotted green;
  text-align: center; 
}

HTML-Elemente können über ihre Attributnamen selektiert werden. In CSS muss der Attributnamen zwischen eckigen Klammern [ ] gesetzt werden.

Beispiel 1
Dieser Attributselektor wird in einem HTML-Dokument um jedes HTML-Element, das ein title-Attribut besitzt, einen Rahmen zeichnen.

/* Styling für alle Elemente mit dem Attribut title */
[title] {
  border: 4px solid black;
}

Beispiel 2
Dieser Attributselektor kann auch auf bestimmte HTML-Elemente angewendet werden. Im Beispiel unten selektiert der Attributselektor alle title-Attribute des <a>-Elements.

/* Styling for alle a-Element mit dem Attribut title */
a[title] { 
  text-decoration: none;
  color: red;
  font-weight: bold;
  border: 2px dotted red;
}

Mit dem Attributselektor können Attribute mit einem bestimmten Wert selektiert werden. Es gibt drei Möglichkeiten einen bestimmten Attributwert auszuwählen:

Selektor Bezecihnung Auswahl HTML-Beispiel
[attr=wert] Attributselektor (Attributwert) jedes Element, bei dem das Attribut attr den Wert wert enthält <elem attr=„wert“>
.klname Klassenselektor Element mit der Klasse klname <p class=„klname“>
#elemid ID-Selektor Element mit der ID elemid <p id=„elemid“>
  • modul/m287/learningunits/lu02/spezielle-selektoren.1741324481.txt.gz
  • Zuletzt geändert: 2025/03/07 06:14
  • von kdemirci