Attributselektoren

Jedes HTML-Element kann Attribute haben – href, type, src, alt, required und viele mehr. Attributselektoren ermöglichen es, Elemente direkt über diese Attribute anzusprechen, ohne eine extra Klasse vergeben zu müssen.

Das macht den Code schlanker und nutzt was bereits im HTML vorhanden ist.

---

Grundprinzip

• [attr]Attribut ist vorhanden
• [attr="x"]Attributwert ist exakt x
• [attr^="x"]Attributwert beginnt mit x
• [attr$="x"]Attributwert endet mit x
• [attr*="x"]Attributwert enthält x irgendwo
• [attr~="x"]Attributwert enthält x als ganzes Wort (Leerzeichen-getrennt)
• [attr|="x"]Attributwert ist x oder beginnt mit x- (Trennstrich-getrennt)

---

Beispiele

Dateitype-Labels mit ::after

Mit [href$=".pdf"] werden alle Links angesprochen, deren href auf .pdf endet – und via ::after wird ein farbiges Text-Label angehängt. Kein Bild, kein JavaScript.

Jahresbericht herunterladen   Anleitung herunterladen

/* gemeinsame Eigenschaften */
a[href$=".pdf"]::after,
a[href$=".doc"]::after,
a[href$=".docx"]::after {
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    padding: 0.1em 0.4em;
    margin-left: 0.4em;
}

/* nur die Unterschiede */
a[href$=".pdf"]::after {
    content: " ▸ PDF";
    background: #e74c3c;
}

a[href$=".doc"]::after,
a[href$=".docx"]::after {
    content: " ▸ DOC";
    background: #2980b9;
}

Externe Links

Mit [href^="https://"] werden alle Links angesprochen, deren href mit https:// beginnt – also alle externen Links.

intensivstation.ch   interner Link

a[href^="https://"]::after {
    content: " ↗";
    font-size: 0.85rem;
}

Formular-Inputs nach Type ansprechen

Der type eines Inputs ist ein Attribut – man kann ihn direkt ansprechen, ohne eine Klasse zu brauchen. Das Attribut required hat keinen Wert, es muss nur vorhanden sein.

     

input[type="text"]     { border: 2px solid blue; }
input[type="email"]    { border: 2px solid green; }
input[type="password"] { border: 2px solid red; }
input[required]        { outline: 3px solid orange; }

---

Attributselektor-Modifier

Mit einem Modifier kann festgelegt werden, ob Gross- und Kleinschreibung beim Vergleich eines Attributwerts berücksichtigt wird.

Der Modifier i vergleicht den Attributwert ohne Berücksichtigung der Gross- und Kleinschreibung (case-insensitive).

a[href$=".svg" i] {
    border: 2px solid hotpink;
}

Damit werden alle folgenden Links getroffen:

<a href="logo.svg">Logo</a>
<a href="logo.SVG">Logo</a>
<a href="logo.SvG">Logo</a>

Der Modifier s vergleicht den Attributwert mit Berücksichtigung der Gross- und Kleinschreibung (case-sensitive).

Hinweis: Diese Modifier werden nur selten benötigt, können aber in Frameworks, Designsystemen oder bei inkonsistenten Dateinamen hilfreich sein.

---

Kurz gesagt

• Attributselektoren sprechen Elemente direkt über ihre Attribute an
• Kein class nötig – nutze was bereits im HTML steht
• [attr$="x"] endet mit, [attr^="x"] beginnt mit, [attr*="x"] enthält
• ::after kombiniert mit Attributselektoren = schlankes CSS ohne JavaScript
• Der Modifier i ignoriert die Gross- und Kleinschreibung, s berücksichtigt sie

---