Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
modul:m287:learningunits:lu02:spezielle-selektoren [2025/03/07 06:13] – kdemirci | modul:m287:learningunits:lu02:spezielle-selektoren [2025/03/07 14:51] (aktuell) – kdemirci | ||
---|---|---|---|
Zeile 8: | Zeile 8: | ||
Der folgende Universal-Selektor setzt überall einen gepunkteten grünen Rahmen. | Der folgende Universal-Selektor setzt überall einen gepunkteten grünen Rahmen. | ||
- | < | + | < |
/* Grüner, gepunkteter Rahmen für alle Elemente */ | /* Grüner, gepunkteter Rahmen für alle Elemente */ | ||
* { | * { | ||
Zeile 25: | Zeile 25: | ||
**Beispiel 1**\\ | **Beispiel 1**\\ | ||
Dieser Attributselektor wird in einem HTML-Dokument um jedes HTML-Element, | Dieser Attributselektor wird in einem HTML-Dokument um jedes HTML-Element, | ||
- | < | + | < |
/* Styling für alle Elemente mit dem Attribut title */ | /* Styling für alle Elemente mit dem Attribut title */ | ||
[title] { | [title] { | ||
Zeile 49: | Zeile 49: | ||
Mit dem Attributselektor können Attribute mit einem bestimmten Wert selektiert werden. Es gibt drei Möglichkeiten einen bestimmten Attributwert auszuwählen: | 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 | <color # | ||
+ | | [attr< | ||
+ | | [attr< | ||
+ | **Beispiel 1**\\ | ||
+ | <code css> | ||
+ | /* Styling für alle HTML-Elemente wo title | ||
+ | den Attributwert deprecated besitzt | ||
+ | */ | ||
+ | [title=deprecated] { | ||
+ | color: red; | ||
+ | text-decoration: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **Beispiel 2**\\ | ||
+ | <code css> | ||
+ | /* Styling von HTML-Elemente wo title im | ||
+ | | ||
+ | */ | ||
+ | [title~=bzzlab] { | ||
+ | font-weight: | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **Beispiel 3**\\ | ||
+ | <code css> | ||
+ | /* Styling von HTML-Elemente wo hreflang | ||
+ | mit dem Attributwert de, gefolgt von | ||
+ | einem Bindestrich, | ||
+ | */ | ||
+ | [hreflang|=de] { | ||
+ | font-weight: | ||
+ | color: red; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Attributselektor mit einem bestimmten Teilwert ===== | ||
+ | In CSS3 wurden Attributselektoren erweitert, um auch Teilwerte auszuwählen. Dazu gibt es drei Attributselektoren tabellarisch dargestellt: | ||
+ | |||
+ | | **Selektor** | **Bezecihnung** | **Auswahl** | **HTML-Beispiel** | | ||
+ | | [attr< | ||
+ | | [attr< | ||
+ | | [attr< | ||
+ | |||
+ | **Beispiel 1**\\ | ||
+ | <code css> | ||
+ | /* Styling alle a-Elemente wo das Attribut href mit http:// beginnt */ | ||
+ | a[href^=" | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **Beispiel 2**\\ | ||
+ | <code css> | ||
+ | /* Styling für a-Elemente wo das Attribut href mit .pdf endet */ | ||
+ | a[href$=" | ||
+ | text-decoration: | ||
+ | color: red; | ||
+ | padding: 1px; | ||
+ | border: 2px dotted red; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **Beispiel 3**\\ | ||
+ | <code css> | ||
+ | /* Styling für a-Elemente wo im Attribut href die Textfolge mydomain enthalten ist */ | ||
+ | a[href*=mydomain] { | ||
+ | font-weight: | ||
+ | color: red; | ||
+ | } | ||
+ | </ |