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“>
[attr~=wert] Attributselektor (Attributwert) mit Tilde (~) jedes Element, bei dem im Attribut attr der Wert wert als allein stehendes Wort vorkommt <elem attr=„abc wert xyz“>
[attr|=wert] Attributselektor (Attributwert) mit Verkettungszeichen jedes Element, bei dem im Attribut attr der Wert valx am Anfang als eine durch Bindestrich getrennte Zeichenfolge steht <elem attr=„valx-valy“>

Beispiel 1

/* Styling für alle HTML-Elemente wo title
   den Attributwert deprecated besitzt
 */
[title=deprecated] {
  color: red;
  text-decoration: line-through;
}

Beispiel 2

/* Styling von HTML-Elemente wo title im
   Attributwert das Wort "bzzlab" enthält
 */
[title~=bzzlab] { 
	font-weight: bold; 
	color: red; 
}

Beispiel 3

/* Styling von HTML-Elemente wo hreflang
   mit dem Attributwert de, gefolgt von 
   einem Bindestrich, beginnt
 */
[hreflang|=de] { 
	font-weight: bold;
	color: red; 
}

In CSS3 wurden Attributselektoren erweitert, um auch Teilwerte auszuwählen. Dazu gibt es drei Attributselektoren tabellarisch dargestellt:

Selektor Bezecihnung Auswahl HTML-Beispiel
[attr^=wert] Attributselektor (Teilwert) jedes Element, bei dem das Attribut attr mit der Textfolge wert anfängt <elem attr=„werter“>
[attr$=wert] Attributselektor (Teilwert) jedes Element, bei dem das Attribut attr mit der Textfolge wert endet <elem attr=„endwert“>
[attr*=wert]  Attributselektor (Teilwert) jedes Element, bei dem das Attribut attr mit der Textfolge wert enthält  <elem attr=„bewertung“>

Beispiel 1

/* Styling alle a-Elemente wo das Attribut href mit http:// beginnt */
a[href^="http://"] {
 text-decoration: none;
 border-bottom: 2px dotted red;
 color: red;
}

Beispiel 2

/* Styling für a-Elemente wo das Attribut href mit .pdf endet */
a[href$=".pdf"] {
  text-decoration: none;
  color: red;
  padding: 1px;
  border: 2px dotted red;
}

Beispiel 3

/* Styling für a-Elemente wo im Attribut href die Textfolge mydomain enthalten ist */
a[href*=mydomain] { 
  font-weight: bold; 
  color: red; 
}
  • modul/m287/learningunits/lu02/spezielle-selektoren.1741328624.txt.gz
  • Zuletzt geändert: 2025/03/07 07:23
  • von kdemirci