Informatik Webentwicklung – CSS und Selektoren
Karteikarten zum Thema „Informatik“ · 15 Karten · von atrio. Beispiele: Was ist der universelle Selektor und was bewirkt er? · Wie unterscheiden sich Klassen…
Karten
15 KartenWas ist der universelle Selektor und was bewirkt er?
Rückseite
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?
Rückseite
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 (> )?
Rückseite
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?
Rückseite
: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?
Rückseite
: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.
Wie funktioniert der Attribut-Selektor [attr^=wert] im Vergleich zu [attr$=wert] und [attr*=wert]?
Rückseite
^= bedeutet 'beginnt mit', $= 'endet mit', *= 'enthält irgendwo'. Beispiel: a[href^=https] selektiert nur HTTPS-Links.
Was ist der Unterschied zwischen :not(.klasse) und :not(:first-child)?
Rückseite
:not() negiert den übergebenen Selektor. :not(.klasse) trifft alle Elemente ohne diese Klasse, :not(:first-child) alle außer dem ersten Kind. Erhöht Spezifität nicht.
Wie berechnet sich die Spezifität bei mehreren Selektoren?
Rückseite
Spezifität als Tripel (IDs, Klassen/Attribute/Pseudo-Klassen, Elemente/Pseudo-Elemente). Inline-Styles (1,0,0,0) > IDs > Klassen > Elemente. Höheres Tripel gewinnt, bei Gleichstand spätere Regel.
Was bewirkt der adjacent sibling combinator (+) und der general sibling combinator (~)?
Rückseite
+ selektiert das unmittelbar folgende Geschwisterelement, ~ alle folgenden Geschwister. h2 + p trifft nur den ersten Absatz nach h2, h2 ~ p alle Absätze danach.
Welche Pseudo-Elemente gibt es und wie unterscheiden sie sich von Pseudo-Klassen?
Rückseite
Pseudo-Elemente (::before, ::after, ::first-line, ::first-letter) erzeugen virtuelle Elemente, Pseudo-Klassen (:hover, :focus) beschreiben Zustände. Doppeltes :: für Elemente, einzelnes : für Klassen.
Was macht der Selektor input:invalid und wann greift er?
Rückseite
Selektiert Formularfelder, die Browser-Validierung nicht bestehen (z. B. leere required-Felder, falsches E-Mail-Format). Nützlich für clientseitige Fehlermarkierung ohne JavaScript.
Wie wirkt sich :where() auf die Spezifität aus im Gegensatz zu :is()?
Rückseite
:where() hat immer Spezifität 0, :is() nimmt die höchste Spezifität seiner Argumente. :where(.a, .b) ist schwächer als .c, :is(.a, .b) stark wie .a oder .b.
Was selektiert :nth-child(2n+1) und wie liest man die Formel?
Rückseite
Selektiert ungerade Kinder (1, 3, 5...). Formel an+b: n beginnt bei 0, a ist Schrittweite, b Offset. 2n+1 = jeden 2. ab 1. :nth-child(odd) ist Kurzform.
Wann verwendet man ::marker und was kann man damit stylen?
Rückseite
::marker stylt Listenaufzählungspunkte (Bullet, Nummer). Erlaubt color, font, content. Funktioniert nur bei display: list-item. Beispiel: li::marker { color: red; } färbt Bullet rot.
Wie kombiniert man Selektoren für 'Button mit Klasse primary, aber nicht disabled'?
Rückseite
button.primary:not(:disabled) oder button.primary:not([disabled]). Kombiniert Klassen-Selektor mit Negations-Pseudo-Klasse. Spezifität: (0,2,1) durch Klasse + :not()-Inhalt.