Lädt...

CSS-Attributselektoren

Bisher haben Sie Elemente über Tag-Namen, class, id und Baumbeziehungen gefunden. Manchmal sagt das HTML die Wahrheit schon selbst: Dieser Link hat target, dieses Feld ist type="email", die Adresse beginnt mit https. Der Attributselektor liest genau diese Wahrheit — ohne für jeden Fall eine neue Klasse zu erfinden.

Was ist ein Attributselektor?

Ein Attributselektor findet Elemente, die ein bestimmtes HTML-Attribut haben. Sie können nur das „Vorhandensein“ prüfen oder den Wert exakt bzw. teilweise vergleichen. Der Attributname steht in eckigen Klammern: [attr].

Fünf Alltagsmuster

Mit diesen Mustern decken Sie fast die gesamte übliche Attributarbeit ab.

📊 Operatoren für Attributselektoren

Muster Einfache Bedeutung Beispiel
[attr] Dieses Attribut ist da (beliebiger Wert) a[target]
[attr="value"] Der Wert ist genau dieser input[type="email"]
[attr^="value"] Der Wert beginnt mit diesem Text a[href^="https"]
[attr$="value"] Der Wert endet mit diesem Text a[href$=".pdf"]
[attr*="value"] Dieser Text steht irgendwo im Wert a[href*="docs"]

Nur Vorhandensein — [attr]

Steht nur der Name in den Klammern, heißt das: „Dieses Attribut soll vorhanden sein.“ Welchen Wert es hat, spielt keine Rolle.

Vorhandensein — Links, die einen neuen Tab öffnen

css
CSS Code 
a[target] {
font-weight: 600;
}

Wann hilft das?

Optionale HTML-Flags: ein Link mit target, oder ein Element mit data-state — auch wenn Sie den Wert noch nicht filtern.

Exakter Wert — [attr="value"]

Das = sagt: Der Wert muss Buchstabe für Buchstabe stimmen. Setzen Sie den Wert meist in Anführungszeichen — klarer und sicherer.

Exakter Wert — E-Mail-Feld

css
CSS Code 
input[type="email"] {
border: 1px solid #0f766e;
}

Klasse bauen oder type nutzen?

Hat das HTML bereits type="email", schreiben Sie das in den Selektor. Eine neue Klasse (z. B. .email-field) brauchen Sie, wenn dasselbe Aussehen auch ohne dieses Attribut gelten soll.

Wertanfang — ^=

^= bedeutet: Der Attributwert beginnt mit diesem Text. Sehr praktisch für sichere Adressen oder gemeinsame Prefixe.

Beginnt mit — https-Links

css
CSS Code 
a[href^="https"] {
color: #0f766e;
}

Wertende — $=

$= bedeutet: Der Wert endet mit diesem Text. Ideal für Dateiendungen in href oder src.

Endet mit — PDF-Link

css
CSS Code 
a[href$=".pdf"] {
font-style: italic;
}

Irgendwo im Wert — *=

*= sagt: Dieser Text erscheint irgendwo im Wert. Stark — aber schnell zu großzügig. Kennen Sie Anfang oder Ende, sind ^= oder $= meist sauberer.

Enthält — docs-Pfad in der Adresse

css
CSS Code 
a[href*="docs"] {
text-decoration: underline;
}

Gute Gewohnheiten

  • Werte im Selektor in Anführungszeichen: type="email"
  • Bei voller Seite den Tag-Namen dazu: input[type="search"] liest sich klarer als nacktes [type="search"]
  • Schreibweise und Groß-/Kleinschreibung wie im HTML
  • Nicht jede Klasse durch Attribute ersetzen; Attribute nutzen, wenn das Markup die Tatsache schon trägt

Selbst ausprobieren

  1. Drei Links: einer https://…, einer endet auf .pdf, einer hat docs im Pfad; plus <input type="email"> und <input type="text">.
  2. a[href^="https"] { color: #0f766e; } — nur der sichere Link wechselt die Farbe.
  3. a[href$=".pdf"] { font-style: italic; } — der PDF-Link wird kursiv.
  4. input[type="email"] { border-color: #0f766e; } — nur das E-Mail-Feld bekommt den Rand.
  5. Optional: a[href*="docs"] — kann mehr Links treffen als striktes Präfix/Suffix.

Typische Fehler

  • [type=email] ohne Anführungszeichen, obwohl Anführungszeichen klarer und sicherer sind
  • *= statt ^= — „enthält“ trifft auch die Mitte; Extra-Links leuchten auf
  • Für gewöhnliches Aussehen [class] statt .name
  • Vergessen, dass = den ganzen Wert will — type="text" ist nicht type="textbox"
  • Attributnamen verwechseln — hreflang ist nicht href

Kurzfassung

  • Attributselektoren arbeiten mit [ ] auf HTML-Attributen
  • Nur Name = Vorhandensein; = = exakter Wert
  • ^= Anfang, $= Ende, *= irgendwo im Wert
  • Den engsten Operator wählen, der Ihre Absicht noch trifft
  • Bei Bedarf den Tag-Namen an den Selektor hängen
  • An echten href- und type-Attributen üben und neu laden

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial