Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- css [2024/11/30 19:59]
root [Farben]
+++ css [2025/01/04 17:03] (aktuell)
root [Element mit mehreren Klassen]
@@ Zeile 11: / Zeile 11: @@
   * Kann eine Name oder ein HTML-Element bzw. eine Menge von HTML-Elementen sein
-  * Eine Regel kann mehrere Selektoren haben
+^Name ^Format CSS ^Format HTML ^Beschreibung ^
+|Type-Selektor|Element|<Element>|Regel gilt für alle Elemente dieses Typs. <WRAP>
+<sxh css>
+h1 {text-align: right;}
+</sxh> </WRAP>|
+|Class-Selektor|.Class|<Element class="Class"|Regel für alle Elemente dieser Klasse|
+|ID-Selektor|#ID|<Element id="ID">|Regel für das Element (eine ID kann in einem Dokument nur einmal vergeben werden -> identifziert ein Element eindeutig)|
+|Pseudo-Klassen|Element:Pseudoklasse|<Element>|Regel wenn das Element in dem durch die Pseudo-Klasse beschriebenen Zustand ist oder ein bestimmtes Element ist. \\ \\ Z.B. a:hover -> wenn man über einem a-Element ist, a:visited -> Wenn man ein A-Element (also einen Link) besucht hat. \\ Oder h2:last-of-type -> letztes h2-Element im Dokument|
+|Attribut-Selektoren|Element[Attribut=Value]|<Element attribut=value>|Gilt für bestimmte Elemente, die ein bestimmtes Attribut auf einen bestimmten Wert gesetzt haben|
+===== Kombinationen =====
+==== Oder ====
+    * Eine Regel kann mehrere Selektoren haben
 <sxh css>
 h1, .myclass {text-align: center}
@@ Zeile 18: / Zeile 34: @@
         * funktioniert wie "oder" -> Elemente die h1 sind oder ".myclass" als Klasse haben
   * Selektoren können kaskadiert sein
-<sxh css>
+==== Nachkommen ====
+  * Gilt für Klassen/Elemente die Nachkomme (B befindet sich irgendwo innerhalb der Tags von A) - in beliebiger Tiefe - eines anderen Elements oder eines Elements mit einer bestimmten Klasse sind
+<sxh>
 div .myclass {text-align: center}
 </sxh>
-    * Gilt nur für Elemente in einem div die die klasse "myclass" haben
+    * Gilt nur für Elemente in einem div (irgendwo, in beliebiger Tiefe) die die klasse "myclass" haben
+==== Direkte Nachkommen ====
+  * Gilt für Klassen/Elemente die direkter Nachkomme eines anderen Elements oder Elements mit einer bestimmten Klasse ist
-^Name ^Format CSS ^Format HTML ^Beschreibung ^
-|Type-Selektor|Element|<Element>|Regel gilt für alle Elemente dieses Typs. <WRAP>
 <sxh css>
-h1 {text-align: right;}
+div > .myclass {text-align: center}
-</sxh> </WRAP>|
+</sxh>
-|Class-Selektor|.Class|<Element class="Class"|Regel für alle Elemente dieser Klasse|
-|ID-Selektor|#ID|<Element id="ID">|Regel für das Element (eine ID kann in einem Dokument nur einmal vergeben werden -> identifziert ein Element eindeutig)|
+  * Gilt nur für ein Element mit der Klasse "myclass" dessen Eltern-Element (also das Element in dem sie sich befinden) ein div ist
-|Pseudo-Klassen|Element:Pseudoklasse|<Element>|Regel wenn das Element in dem durch die Pseudo-Klasse beschriebenen Zustand ist. \\ \\ Z.B. a:hover -> wenn man über einem a-Element ist, a:visited -> Wenn man ein A-Element (also einen Link) besucht hat|
+==== Element mit mehreren Klassen ====
+  * ein Element kann mehrere Klassen haben
+<sxh html>
+<div class="myclass anotherclass"></div>
+</sxh>
+<sxh css>
+div.myclass.anotherclass {text-align: center}
+</sxh>
+  * im html können per Aufzählung (per Leerzeichen getrennt) der anzuwendenden Klassen mehrere Klassen angegeben werden
+  * in css werden die Klassen einfach hintereinander geschrieben (ohne Leerzeichen, die "." sind der Klassenindiktator) um anzuzeigen das ein Element alle genannten Klassen haben muss damit die Regel angewendet wird
 ====== Definition ======

MyWiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge