modul:m287:learningunits:lu02:spezielle-selektoren

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
modul:m287:learningunits:lu02:spezielle-selektoren [2025/03/07 06:16] kdemircimodul: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.
  
-<code>+<code css>
 /* 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, das ein <color #ed1c24>title</color>-Attribut besitzt, einen Rahmen zeichnen. Dieser Attributselektor wird in einem HTML-Dokument um jedes HTML-Element, das ein <color #ed1c24>title</color>-Attribut besitzt, einen Rahmen zeichnen.
-<code>+<code css>
 /* Styling für alle Elemente mit dem Attribut title */ /* Styling für alle Elemente mit dem Attribut title */
 [title] { [title] {
Zeile 51: Zeile 51:
 | **Selektor** | **Bezecihnung** | **Auswahl** | **HTML-Beispiel** | | **Selektor** | **Bezecihnung** | **Auswahl** | **HTML-Beispiel** |
 | [attr=wert] | Attributselektor (Attributwert) | jedes Element, bei dem das Attribut attr den Wert wert enthält | <color #ed1c24><elem attr="**wert**"></color> | | [attr=wert] | Attributselektor (Attributwert) | jedes Element, bei dem das Attribut attr den Wert wert enthält | <color #ed1c24><elem attr="**wert**"></color> |
-| [attr<color #ed1c24>**~**</color>=wert] | Attributselektor (Attributwert) mit Tilde (<color #ed1c24>~</color>) | jedes Element, bei dem im Attribut attr der Wert wert als allein stehendes Wort vorkommt |  <color #ed1c24><elem attr="abc **wert** xyz"></color>+| [attr<color #ed1c24>**~**</color>=wert] | Attributselektor (Attributwert) mit Tilde (<color #ed1c24>~</color>) | jedes Element, bei dem im Attribut attr der Wert wert als allein stehendes Wort vorkommt | <color #ed1c24><elem attr="abc **wert** xyz"></color>
-| <color #ed1c24>#elemid</color>ID-Selektor | Element mit der ID elemid | <color #ed1c24><p id="elemid"></color> |+[attr<color #ed1c24>**|**</color>=wert] | Attributselektor (Attributwert) mit Verkettungszeichen | jedes Element, bei dem im Attribut attr der Wert valx am Anfang als eine durch Bindestrich getrennte Zeichenfolge steht | <color #ed1c24><elem attr="**valx**-valy"></color> | 
 + 
 +**Beispiel 1**\\ 
 +<code css> 
 +/* Styling für alle HTML-Elemente wo title 
 +   den Attributwert deprecated besitzt 
 + */ 
 +[title=deprecated] { 
 +  color: red; 
 +  text-decoration: line-through; 
 +
 +</code> 
 + 
 +**Beispiel 2**\\ 
 +<code css> 
 +/* Styling von HTML-Elemente wo title im 
 +   Attributwert das Wort "bzzlab" enthält 
 + */ 
 +[title~=bzzlab] {  
 + font-weight: bold;  
 + color: red;  
 +
 +</code> 
 + 
 +**Beispiel 3**\\ 
 +<code css> 
 +/* Styling von HTML-Elemente wo hreflang 
 +   mit dem Attributwert de, gefolgt von  
 +   einem Bindestrich, beginnt 
 + */ 
 +[hreflang|=de] {  
 + font-weight: bold; 
 + color: red;  
 +
 +</code> 
 + 
 +===== 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<color #ed1c24>**^**</color>=wert] | Attributselektor (Teilwert) | jedes Element, bei dem das Attribut attr mit der Textfolge wert anfängt | <color #ed1c24><elem attr="**wert**er"></color> | 
 +| [attr<color #ed1c24>**$**</color>=wert] | Attributselektor (Teilwert) | jedes Element, bei dem das Attribut attr mit der Textfolge wert endet | <color #ed1c24><elem attr="end**wert**"></color>
 +| [attr<color #ed1c24>*****</color>=wert] | Attributselektor (Teilwert) | jedes Element, bei dem das Attribut attr mit der Textfolge wert enthält | <color #ed1c24><elem attr="be**wert**ung"></color>
 + 
 +**Beispiel 1**\\ 
 +<code css> 
 +/* Styling alle a-Elemente wo das Attribut href mit http:// beginnt */ 
 +a[href^="http://"] { 
 + text-decoration: none; 
 + border-bottom: 2px dotted red; 
 + color: red; 
 +
 +</code> 
 + 
 +**Beispiel 2**\\ 
 +<code css> 
 +/* 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; 
 +
 +</code> 
 + 
 +**Beispiel 3**\\ 
 +<code css> 
 +/* Styling für a-Elemente wo im Attribut href die Textfolge mydomain enthalten ist */ 
 +a[href*=mydomain] {  
 +  font-weight: bold;  
 +  color: red;  
 +
 +</code>
  • modul/m287/learningunits/lu02/spezielle-selektoren.1741324619.txt.gz
  • Zuletzt geändert: 2025/03/07 06:16
  • von kdemirci