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 07: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 53: Zeile 53:
 | [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> |
 | [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> | | [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 ===== ===== Attributselektor mit einem bestimmten Teilwert =====
Zeile 60: Zeile 94:
 | [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 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 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.1741328211.txt.gz
  • Zuletzt geändert: 2025/03/07 07:16
  • von kdemirci