Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu02:spezielle-selektoren [2025/03/07 06:16] – 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.
-<code>
+<code css>
 /* Grüner, gepunkteter Rahmen für alle Elemente */
 * {
@@ Zeile 25: / Zeile 25: @@
 **Beispiel 1**\\
 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 */
 [title] {
@@ Zeile 51: / Zeile 51: @@
 | **Selektor** | **Bezecihnung** | **Auswahl** | **HTML-Beispiel** |
 | [attr=wert] | Attributselektor (Attributwert) | jedes Element, bei dem das Attribut attr den Wert wert enthä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 auszuwä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>