Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
modul:m293:learningunits:lu03:htmselektor [2024/05/13 07:36] – created msuter | modul:m293:learningunits:lu03:htmselektor [2024/05/13 08:15] (aktuell) – msuter | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== LU03c - Selektoren für Elemente ====== | ====== LU03c - Selektoren für Elemente ====== | ||
<WRAP center round info 60%> | <WRAP center round info 60%> | ||
- | Die Attribute '' | + | Die Attribute '' |
+ | Sie erlauben uns, in Stylesheets (CSS) oder Javascript bestimmte Elemente zu selektieren. | ||
</ | </ | ||
+ | |||
+ | ===== id ===== | ||
+ | ^ html ^ css ^ | ||
+ | | <code html> | ||
+ | <form id=" | ||
+ | ... | ||
+ | </ | ||
+ | </ | ||
+ | #loginform { | ||
+ | background-color: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Das '' | ||
+ | Es gibt einem Element eine eindeutige ID (der Wert muss innerhalb des HTML-Dokuments eindeutig sein). | ||
+ | |||
+ | Über das '' | ||
+ | |||
+ | ===== class ===== | ||
+ | ^ html ^ css ^ | ||
+ | | <code html> | ||
+ | <ul> | ||
+ | <li class=" | ||
+ | ... | ||
+ | </li> | ||
+ | <li class=" | ||
+ | ... | ||
+ | </li> | ||
+ | </ul> | ||
+ | </ | ||
+ | .navitem { | ||
+ | color: blue; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Das '' | ||
+ | Es wird meist verwendet, um auf eine Klasse in einem Stylesheet zu verweisen. | ||
+ | Dadurch können wir mehrere Elemente selektieren, | ||
+ | |||
+ | Auch in Javascript können wir alle Elemente mit einer bestimmten Klasse auswählen. | ||
+ | Dies wird aber nicht ganz so häufig gemacht. | ||