Informatik Webentwicklung – CSS und Selektoren
CSS-Selektoren bestimmen, welche HTML-Elemente gestyled werden. Ohne sie funktioniert kein Layout. Nach dem Lernen dieser Karten kennst du alle Selektor-Typen, ihre Spezifität und wie du effizient kombinierst – Basis für jedes Frontend-Projekt.
Lernziele
Was du in dieser Lektion lernst
- Was ist der universelle Selektor und was bewirkt er?
- Wie unterscheiden sich Klassen- und ID-Selektoren in Schreibweise und Eindeutigkeit?
- Was bewirkt der Nachfahren-Kombinator (Leerzeichen) gegenüber dem Kind-Kombinator (> )?
- Welche Pseudo-Klassen gibt es für Link-Zustände und in welcher Reihenfolge sollten sie notiert werden?
Lerntipp
Berechne Spezifität als (ID, Klasse, Element)-Tripel: (0,1,0) schlägt (0,0,10). Zeichne den DOM-Baum und markiere Selektoren farbig – so siehst du Kaskade und Vererbung sofort.
Hinweis: Der Inhalt dieser Seite wurde mit einem KI-Modell erzeugt und nicht von Fachmenschen geprüft. Nutze die Karten als Lernhilfe und gleiche medizinische oder rechtliche Aussagen mit deinen Unterlagen ab.
Karteikarten
Alle 15 Lernkarten
Tippe auf eine Karte, um die Antwort aufzudecken
Häufige Fragen
Die wichtigsten Fragen zu Informatik Webentwicklung – CSS und Selektoren
- Was ist der universelle Selektor und was bewirkt er?
- Der Stern * selektiert jedes Element im Dokument. Er hat Spezifität (0,0,0) und wird oft für CSS-Resets oder Box-Sizing genutzt.
- Wie unterscheiden sich Klassen- und ID-Selektoren in Schreibweise und Eindeutigkeit?
- Klassen starten mit Punkt (.klasse), IDs mit Raute (#id). Klassen sind wiederverwendbar, IDs müssen pro Dokument eindeutig sein.
- Was bewirkt der Nachfahren-Kombinator (Leerzeichen) gegenüber dem Kind-Kombinator (> )?
- Leerzeichen selektiert alle Nachfahren auf beliebiger Tiefe, > nur direkte Kinder. Beispiel: ul li trifft alle li in ul, ul > li nur direkte Kinder.
- Welche Pseudo-Klassen gibt es für Link-Zustände und in welcher Reihenfolge sollten sie notiert werden?
- :link (unbesucht), :visited (besucht), :hover (Maus drüber), :active (geklickt). Merksatz: LoVe HAte – Reihenfolge beachten wegen Kaskade.
- Was selektiert :first-child versus :first-of-type?
- :first-child trifft das erste Kind unabhängig vom Typ, :first-of-type das erste Kind eines bestimmten Typs. Bei <div><p></p><span></span></div> trifft p:first-child nicht, p:first-of-type schon.
Warum Atrio?
- FSRS-5 Spaced Repetition
- Der Algorithmus plant jede Wiederholung anhand deiner eigenen Lernhistorie und stellt Karten kurz bevor du sie vergisst – das reduziert unnötige Wiederholungen.
- KI-Import
- Notizen, Skripte und PDFs in Sekunden in Lernkarten verwandeln – genau wie diese Seite automatisch entsteht.
- Prüfungsplanung
- Termine hinterlegen und Atrio berechnet rückwärts, wie viele Karten du pro Tag lernen musst – ohne Stress.
Interaktiv lernen
Diese 15 Karten jetzt interaktiv in der Atrio-App lernen
Atrio zeigt dir jede Karte dann, wenn du sie fast vergessen hättest – damit bleibt genau das hängen, was du lernst.
Starter-Plan kostenlos – keine Kreditkarte erforderlich.